v-model=“value” 可以实现表单元素的双向绑定,其原理是:
1.v-bind绑定响应式数据;
2.通过oninput触发事件获取当前$event.target.value,然后赋值给当前变量。
<div id="app">
<input type="text" v-model="value">
// 当type="checkbox" v-model绑定的值是 true 或者 false
<input type="checkbox" v-model="value">
// 当type="radio" 需要在标签上加 value="text" 才会有值绑定 该值为 text
<input type="radio" value="text" v-model="value">
<textarea type="text" v-model="value"></textarea>
// 当表单元素为下拉框的时候 如果option没有写value的时候,绑定的值为下拉项,否则就是option的value值
<select v-model="value">
<option disabled>----请选择----</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
// v-model还有一些修饰符 lazy(输入框失焦时绑定值)
<input type="text" v-model.lazy="value">
// number(input默认绑定的都是string类型,加number修饰后,当输入的是数字的时候 会转成number类型)
<input type="text" v-model.number="value">
// trim(会去掉首尾空格)
<input type="text" v-model.trim="value">
<span>value:{{value}}</span>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
value: ''
},
watch: {
value() {
console.log(typeof this.value);
}
}
})
</script>```