Templates 如何使用vue cli将数据呈现到DOM

我创建了一个模板：

<template>
<div>
<slot></slot>
</div>
</template>

<script>
export default {
 data() {
   return {
    isShowing: false 
   }
 },
methods: {
toggleShow: function() {
  this.isShowing = !this.isShowing;
  setTimeout(() => {
    this.toggleShow1();
  }, 800);
  }
}
<script>

<style>
  ..
</style>

导出默认值{
数据（）{
返回{
isShowing:错
}
},
方法：{
toggleShow:function（）{
this.isShowing=！this.isShowing；
设置超时（（）=>{
this.toggleShow1（）；
}, 800);
}
}
..

在HTML文档中，我只想在isShowing设置为true时切换标题：

<div v-if="isShowing">
   <div>
       <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
   </div>
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。

但是我得到了这个错误：ReferenceError:isShowing没有定义

---

任何帮助都将不胜感激。谢谢！

您正在使用vue实例的外部数据。

isShowing

只能在同一

.vue

文件的

内部使用

例如：

<template>
<div>
  <div v-if="isShowing">
    <slot></slot>
 </div>
</div>
</template>

<script>
export default {
 data() {
   return {
    isShowing: false 
   }
 },
methods: {
toggleShow: function() {
  this.isShowing = !this.isShowing;
  setTimeout(() => {
    this.toggleShow1();
  }, 800);
  }
}
<script>

<style>
  ..
</style>

导出默认值{
数据（）{
返回{
isShowing:错
}
},
方法：{
toggleShow:function（）{
this.isShowing=！this.isShowing；
设置超时（（）=>{
this.toggleShow1（）；
}, 800);
}
}
..

您是否在Vue之外使用v-if？您如何使用Vue cli？您使用的是webpack还是browserify？这里没有足够的内容供任何人回答您的问题。@jostrander是的，我在Vue之外使用v-if，我在使用webpack捆绑所有脚本。我也没有使用vuex或Vue-router。正在

数据中返回的对象

方法没有结束括号

}

@thanksd刚刚添加了上面缺少的括号。感谢您指出这一点。但是，问题仍然存在。我很困惑，组件的模板（与插槽）之间的关系是什么还有你文章底部的HTML代码段？但既然我正在将所有功能导入index.HTML文件，我就不能在这里使用主标题，然后使用模板名template.vue（上面的那个）来处理其余部分吗？不幸的是，它不起作用。使用isShowing is index.HTML会抛出“isShowing not defined”错误。