一、 check :
如果使用复选框,只有一个值的时候,会将值转化成 boolean 类型, 如果 true 则代表选中, false 不选中。
如果多个checkbox 添加value属性并且数据类型是数组。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="a" />{{a}}<br/>
愛好：
<input type="checkbox" v-model="b" value="游泳"/> 游泳 // 在 checkbox 上添加 value 属性
<input type="checkbox" v-model="b" value="跳舞"/> 跳舞
<input type="checkbox" v-model="b" value="跑步"/> 跑步
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
a:false,
b:[] //这个地方应该设置成数组的形式, 这样就会把选中的 check 的值存放到这个数组中去。
}
})
</script>
</body>
</html>
二、 redio:
当使用单选按钮的时候设置 value 值, v-model 中设置需要存入的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单选按钮</title>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
picked: ''
}
})
</script>
</body>
</html>
网友评论