[已解决] Vue.js数据绑定的问题

Question

现在需要在HTML里的一个下拉菜单中，动态绑定数据到下拉列表。

<select id="selStyle">

<option  v-for="item in optionList" value={{item.ID}}>{{item.name}}</option>

</select>

绑定的是一个JSON格式的数据，JSON里有ID和name属性。

现在运行结果是下拉菜单的文字显示正常({{item.name}}),但是option里的value部分并没有显示{{item.ID}}的值，而是把{{item.ID}}当成了字符串赋值了。

这应该怎么修改？

---

已解决

Answer 1

补充一下,直接用简写:value="item.id"即可,可以看这篇我的回答

Answer 2

已经解决了，刚查了文档：

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令。

所以这个问题正确的写法是：

<option v-for="item in optionList" v-bind:value="item.ID">{{item.name}}</option>