Vue.js入门学习--选择菜单select的绑定(七)
完整demoselect选择标签v-model绑定请选择你想去的城市巴黎洛杉矶信阳你的选择是:{{selectedCity}}
·
完整demo
<html>
<head>
<title>select选择标签v-model绑定</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app1">
<!-- 单选 select(结果绑定到一个字符串) -->
<select v-model="selectedCity">
<option disabled value=''>请选择你想去的城市</option>
<option>巴黎</option>
<option>洛杉矶</option>
<option>信阳</option>
</select>
<span>你的选择是:{{selectedCity}}</span>
<br/>
<br/>
<!-- 多选 select(结果绑定到一个数组) -->
<select v-model="selectedFood" multiple>
<option disabled value=''>请选择你想吃的食物(多选)</option>
<option>香肠</option>
<option>牛排</option>
<option>冰激凌</option>
</select>
<span>你的选择是:{{selectedFood}}</span>
<br/>
<br/>
<!-- 使用 v-for 动态渲染 option animals为一个数组,其元素是一个键值对的list-->
<!-- 单选 select(结果绑定到一个字符串,值取value的结果) -->
<select v-model="selected">
<option disabled value=''>请选择你要翻译的动物单词</option>
<option v-for="animal in animals" :value="animal.value">{{animal.name}}</option>
</select>
<span>翻译:{{selected}}</span>
</div>
</body>
<script>
new Vue({
el: '#app1',
data: {
selected: '',
selectedCity: '',
selectedFood: [],
animals: [{
name: "Dog",
value: "狗"
},
{
name: "Cat",
value: "猫"
},
{
name: "Sheep",
value: "羊"
}
]
}
})
</script>
</html>
一、单选 select(结果绑定到一个字符串)
(1)DOM
(2)数据绑定、模板或者渲染
二、多选 select(结果绑定到一个数组)
(1)DOM
(2)数据模板
三、单选 select选项结果绑定到一个字符串+ v-for指令动态渲染option选项标签
(1)DOM
(2)数据渲染
四、效果演示
更多推荐
已为社区贡献12条内容
所有评论(0)