<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单与v-model基本用法（三）</title>
</head>
<body>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--选择列表：选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选
和多选两种方式-->
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<!--给<selected>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与
复选框用法类似，示例：-->
<div id="app2">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<!--<option 经常用v-for动态输出，value和text也是用b-bind来动态输出的>-->
<div id="app3">
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<p>选择的项是：{{ selected }}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
selected:'html'
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
selected:['html','js']
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
selected:'html',
options:[
{
text:'HTML',
value:'html'
},
{
text:'JavaScript',
value:'js'
},
{
text:'CSS',
value:'css'
}
]
}
})
</script>
</body>
</html>
表单与v-model基本用法（三）.png
网友评论