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

2020-05-20

155

vue.js

我创建了一个组件：

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

此组件在 :id={{id}}} 上出现错误，并显示模板编译错误：表达式无效：预期属性名称，结果为 '{' 。

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

2个回答

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

应该在 html 标签之间使用花括号

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

BTL

2020-05-20

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

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

Ramin

2020-05-20