Vue.js分隔符不能用引号

Question

我试图创建一个选择表单字段，其中html和值用vue.js v-for属性填充。 HTML被创建得很好，但每个选项的值仍然是$ {item.id}，我假设它是用引号引起来的。任何想法如何解决这个问题？

代码：

<ul id="example-1"> 
    <select> 
<option v-for="item in items" value="${ item.id }">${ item.message }</option> 

var example1 = new Vue({ 
    el: '#example-1', 
    delimiters: ['${', '}'], 
    data: { 
    items: [ 
     { message: 'Foo', id: 1 }, 
     { message: 'Bar', id: 2 } 
    ] 
    } 
}) 

JsFiddle here

Answer 1

要使用HTML属性绑定它，你可以使用v-bind，像follwoing：

<option v-for="item in items" v-bind:value="item.id">${ item.message }</option> 

工作小提琴here。