单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
</head>
<body>
<div id = "app2">
<!-- value ="" 对应的就是 v-model ="" 当选择中时,value="html"就赋值v-model="pick", 如选择第一个，所以pick就为html-->
<input type="radio" v-model="pick" id="1" value="html">
<label for="1">我是html</label>
<input type="radio" v-model="pick" id="2" value="JavaScript">
<label for="2">我是JavaScript</label>
<input type="radio" v-model="pick" id="3" value="vue">
<label for="3">我是Vue</label>
<br />
{{pick}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data:{
pick:"html"
},
computed: {
},
methods: {
},
mounted: function() {
}
})
</script>
</body>
</html>
复选框
<div id = "app2">
<!-- value ="" 对应的就是 v-model ="" 当选择中时,value="html"就赋值v-model="checked", 如选择第一个，所以checked就为html 为true，否则就为false
因为是多选框,所以选择多个的话 data checked：[],就会往里面添加元素，元素为value
-->
<input type="checkbox" v-model="checked" id="1" value="html">
<label for="1">我是html</label>
<input type="checkbox" v-model="checked" id="2" value="JavaScript">
<label for="2">我是JavaScript</label>
<input type="checkbox" v-model="checked" id="3" value="vue">
<label for="3">我是Vue</label>
<br />
我的选择是：{{checked}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data:{
//默认选择html,择多个的话 data checked：[],就会往里面添加元素，元素为value
checked:["html"]
},
computed: {
},
methods: {
},
mounted: function() {
}
})
</script>
</body>
下拉框
<div id = "app2">
<select v-model="selected" multiple>
<!--<option>是备选项，如果含有value属性v-model就会优先匹配value的值， 如果没有就会
直接匹配<option>的text,比如选中第二项时 selected 的值是JavaScript而不是js
给<selected>添加属性 multiple 就可以多选了， 此时v-model 绑定是一个数组与复选框用
法类似，示例代码如下
-->
<option>css</option>
<option value= "JavaScript">js</option>
<option>vue</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data:{
// selected:"" 单选
selected:[]
},
computed: {
},
methods: {
},
mounted: function() {
}
})
</script>
c0b566b3a79d04338db19ebae202da7.png
绑定值
上面介绍的单选按钮、复选框和选择列表在单独使用或单的 模式下 v-model 绑定的值是一
个静态字符串或布尔值 但在业务中，有时需要绑定一个动的 数据 这时可以用 v-bind 来实现。
<div id = "app2">
<!-- :value ="value" 对应的就是 v-model ="" 当选择中时,:value="value"就赋值v-model="pick", ，所以pick就为value-->
<input type="radio" v-model="pick" id="1" :value="value">
<label for="1">我是单选按钮</label>
<br />
{{pick}}
<br />
{{value}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data:{
pick:false,
value:123
},
computed: {
},
methods: {
},
mounted: function() {
}
})
// 在选中时，app.picked === app value的值都是 123
</script>
复选框
<div id='app'>
<input type='checkbox' v-model='toggle' :true-value='valuel' :false-value='value2'>
<label>复选框</label>
<p>{{toggle}}</p>
<p>{{valuel}}</p>
<p>{{value2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
toggle: false,
valuel: "a",
value2: "b"
}
})
</script>
<!-- 勾选时 app.toggle === app.valuel 未勾选时， app.toggle === app .value2 -->
下拉框
e1c46fb3064107c6e30498f5fa2118e.png
