<!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>
<!--单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值
为真时选中，为否时不选，例如：-->
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<!--如果是组合使用来实现互斥的效果，就需要v-model配合value来使用-->
<div id="app2">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是：{{ picked }}</p>
</div>
<!--复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时
，也是用v-model来绑定一个布尔值，例如：-->
<div id="app3">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{ checked }}</label>
</div>
<!--组合使用时，就会选中这一项，这一过程也是双向的，在勾选时，value的
值也会自动push到这个数组中，例如：-->
<div id="app4">
<input type="checkbox" v-model="checked" value="html" id="html2">
<label for="html2">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js2">
<label for="js2">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css2">
<label for="css2">CSS</label>
<br>
<p>选择的项是：{{ checked }}</p>
</div>
<script>
var app = new Vue({
el:'app',
data:{
picked:true
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
picked:'js'
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
checked:false
}
})
</script>
<script>
var app = new Vue({
el:'#app4',
data:{
checked:['html','css']
}
})
</script>
</body>
</html>
选择框.png
网友评论