时间戳

首页 > 解决方案 > Vue div 文本没有动态更新

vue.js - Vue div 文本没有动态更新

问题描述

我有一个 div 元素：

<div>{{data}}</div>

但是每次更新数据时（我用 console.log 验证），div 中的文本并没有改变。你知道如何随着数据的变化动态改变div中的文本吗

标签： vue.jsbinding

解决方案

Vue 不会主动在您的页面上查找任何小胡子语法并替换它。它只控制您告诉它的内容（模板）。

要告诉 Vue 控制一个特定的模板，你必须用它来实例化 Vue。

基本示例：

Vue.config.productionTip = false;
Vue.config.devtools = false;

// this instantiates Vue in the element with id="myTemplate"
new Vue({
  el: '#myTemplate',
  data: () => ({
    foo: 'bar'
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- Contents of `#myTemplate` are parsed as Vue template -->
<div id="myTemplate">
  <h2>Inside Vue template: {{foo}}</h2>
  <input v-model="foo">
</div>

<h2>Outside of Vue template: {{foo}}</h2>

还要注意data的是 Vue 实例中的保留名称。它期望一个对象或一个返回对象的函数。在编译时在该对象上定义的任何属性都是开箱即用的。所以你可以说data是 Vue 实例的反应式包装器。它的所有属性都在模板中可用，您不必在它们前面加上data..

因此，如果您真的想data在模板中用作名称，则必须data在data. （即：data: () => ({ data: { foo: 'bar'}})并在模板中使用它作为{{data.foo}}.

推荐阅读