Vue div文本没有动态更新

Question

我有一个div元素：

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

但每次更新数据时(我用console.log验证了这一点(，div中的文本都不会改变。你知道如何在数据更改时动态更改div中的文本吗

Answer 1

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

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