vue学习笔记--vue 指令实例

利用v-model 和v-for v-bind 实现动态渲染

image.png

第一步：先用html 实现普通的拣选框功能：

<select >
<option >
1
</option>
<option >
2
</option>
<option >
3
</option>
</select>
<span将来在这里显示拣选的内容</span>

第二步：创建一个实例,el建立一个挂载点，将option标签内的内容（text，value）存入list中。

new Vue({
el: '#app',
data: {
selected: 'A',
list: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})

第三步：改造html，挂载点，利用v-model实现数据双向绑定，以实现拣选框内容与span标签内插值同步，v-for用来循环list ,v-bind绑定value

<div id="app" >
<select v-model="selected">
<option v-for="option in list" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

完整代码如下：

image.png