1. 基础用法
文本输入绑定
使用v-model和{{}}
实现对表单元素的双向数据绑定
- 单行文本
<input v-model="message" placeholder="输入">
- 多行文本
<textarea v-model="message" placeholder="输入"></textarea>
2. 绑定值
选择性框输入绑定值
需要动态数据时,使用v-bind绑定
- 单选按钮
<input type="radio" id="one" :value='value' v-model="picked">
- 复选框
<input type="checkbox" id="checkbox" v-model="checked" :true-value='value1' :false-value='value2'>
- 下拉选择
<select v-model="selected"> <option disabled value="">请选择</option> <option :value='{number:123}'>123</option> </select>
3. 修饰符
常用修饰符可以控制数据同步的时机
常用修饰符
- v-model.lazy 从input事件中转变为在 change 事件中同步数据
- v-model.number 可以将输入转换为 Number类型
- v-model.trim 可以自动过滤输入的首尾空格
demo
<div id="app">
<h4>文本框</h4>
<!-- change事件是等光标失去焦点之后才会触发,而input事件是实时触发的 -->
<input type="text" v-model="message" @change="changeInput" @input="updateInput">
<br>
<br>
<textarea v-model="message"></textarea>
<hr>
<h4>单选框</h4>
<input type="radio" name="radio" value="1" v-model="param"><label for="">苹果</label>
<input type="radio" name="radio" value="2" v-model="param"><label for="">雪梨</label>
<p>{{param}}</p>
<hr>
<h4>复选框</h4>
<input type="checkbox" v-model="checkVal" :true-value="trueValue" :false-value="falseValue">
<p>{{checkVal}}</p>
<hr>
<h4>下拉选框</h4>
<!-- multiple 多选 ctrl+鼠标单击-->
<select v-model="selected" multiple>
<option value="">请选择</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<p>{{selected}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '我是message初始值',
param: '1',
checkVal: '',
trueValue: '1',
falseValue: '2',
selected: []
},
methods: {
changeInput(e){
console.log('changeInput', e)
},
updateInput(e){
console.log('updateInput', e)
}
}
})
</script>