如何使用 vue-cli 将数据渲染到 DOM

Posted 2023-02-23

【中文标题】如何使用 vue-cli 将数据渲染到 DOM

【英文标题】：How to Render Data to the DOM using vue-cli

【发布时间】：2018-05-11 05:50:00

【问题描述】：

我已经创建了一个模板：

<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

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

【问题讨论】：

你在 Vue 之外使用 v-if 吗？你是如何使用 vue-cli 的？你在用什么 webpack 或 browserify？这里没有足够的人来回答你的问题。

@jostrander 是的，我在 Vue 之外使用 v-if，并且我正在使用 webpack 来捆绑我的所有脚本。我也没有使用 vuex 或 vue-router。

data 方法中返回的对象没有右括号

@thanksd 刚刚添加了上面缺少的括号。感谢您指出了这一点。但是，问题仍然存在。

我很困惑，组件的模板（带槽）和你帖子底部的HTML sn-p是什么关系？

【参考方案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>

【讨论】：

但是由于我将所有功能都导入到 index.html 文件中，我不能只使用

不幸的是它不起作用。使用 isShowing is index.html 会抛出“isShowing not defined”错误。