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

Question

我创建了一个模板：

<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>

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

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

但是我得到这个错误：ReferenceError: isShowing is not defined

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

您正在使用 vue 实例之外的数据。 isShowing 只能在同一个 .vue 文件的 <template> 中使用。

例如：

<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>

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

How to Render Data to the DOM using vue-cli

templates

components

vue.js

vue-cli