vue下拉列表示例
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式
下拉列表单选方式示例
注意：v-model 就会 优先匹配 value
如果没有 就会直接匹配＜option＞的 text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="item">
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>重庆</option>
</select>
<span>被选中的城市为：{{item}}</span>
</div>
<script>
var v=new Vue({
el:"#app",
data:{
item:"北京"
}
});
</script>
</body>
</html>
多选下拉列表示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="item" multiple>
<option >天津</option>
<option>上海</option>
<option>重庆</option>
<option >北京</option>
</select>
<span>被选中的城市为：{{item}}</span>
</div>
<script>
var v=new Vue({
el:"#app",
data:{
item:[]
}
});
</script>
</body>
</html>
