在表单
<input>
、<textarea>
及<select>
元素控件或者组件上创建双向绑定,它负责监听用户的输入事件以更新数据
1. 普通文本框
<div id="app">
<p>{{ msg }}</p>
<input type="text" v-model="msg">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 123,
},
})
</script>
2. 单选框
<div id="app">
<p>{{ sex }}</p>
男 <input type="radio" value="男" v-model="sex">
女 <input type="radio" value="女" v-model="sex">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
sex: 1,
},
})
</script>
3. 复选框
<div id="app">
<p>{{ language }}</p>
PHP <input type="checkbox" value="PHP" v-model="language">
Java <input type="checkbox" value="Java" v-model="language">
Python <input type="checkbox" value="Python" v-model="language">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
language: ['PHP']
},
})
</script>
4. 多行文本框
<div id="app">
<p>{{ content }}</p>
<textarea v-model="content"></textarea>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
content: 123
},
})
</script>
5. 下拉选择框
<div id="app">
<p>{{ city }}</p>
<select v-model="city">
<option disabled value="">请选择</option>
<option value="1">郑州</option>
<option value="2">开封</option>
<option value="3">南阳</option>
</select>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
city: 2
},
})
</script>
6. 修饰符 trim
清除两边的空格
<div id="app">
<p>{{ content.length }}</p>
<input type="text" v-model.trim="content">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
content: ''
},
})
</script>
站长百科网 标签:el,Vue,app,绑定,vm,let,双向,new,model From: https://www.cnblogs.com/10zhan/p/17100128.html