1.文本框
<div id="app">
<input type="text" placeholder="请输入" v-model="text">
<div>输入内容是：</div>
<p style="color: #5bc0de">{{text}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
text: ''
}
})
</script>
效果：
2.单选
单独使用可以使用v-bind绑定一个布尔值
<body>
<div id="app">
<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="html">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="html">CSS</label>
<br>
<p>选择的项是：{{picked}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
picked: 'js',
}
})
</script>
效果：
3.复选框
<body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JS</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的值：{{checked}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
checked: ['html', 'css']
}
})
</script>
效果：
4.下拉框
<body>
<div id="app">
<!--单选-->
<select v-model="selected">
<option>html</option>
<option>js</option>
<option>css</option>
</select>
<p>选择的项：{{selected}}</p>
<!--多选-->
<select v-model="selected2" multiple>
<option>html</option>
<option value="js">js</option>
<option>css</option>
</select>
<p>选择的项：{{selected2}}</p>
<!--动态渲染-->
<select v-model="selected3">
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
<p>选择的项：{{selected3}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
selected: 'js',
selected2: ['js', 'html'],
selected3: 'js',
options: [
{"text": 'JS', "value": 'js'},
{"text": 'HTML', 'value': 'html'},
{"text": 'CSS', "value": "css"},
]
}
})
</script>
<option>是备选项，如果含有value属性，v-model将优先匹配value的值，否则，将匹配<option>的text的值
效果：
评论列表
已有0条评论