渲染 vue 时出现"无效表达式"错误.js组件的 id

Question

我创建了一个组件：

Vue.component("foo", {
template: '<div class="foo" :id={{id}}></div>',
data: function() {
return {
id: "bar" 
}
}
})

这在:id={{id}}与Error compiling template: invalid expression: expected property name, got '{'.

假设bar的ID是唯一的，为什么会出现此错误？

Answer 1

你应该写：template: '<div class="foo" :id="id"></div>'

应在html标记之间使用大括号

例如 ：template: '<div class="foo" :id="id">{{id}}</div>'

Answer 2

当您使用 v-bind 或 "：" 绑定属性时，您不应该有双括号 "{{}}">

template: '<div class="foo" :id="id"></div>'