在vue中,作者提供了很多方便的指令便于开发者使用,其中v-model–数据双向绑定在vue的开发中算是最为常用的一个指令.
v-model的基本使用
- 文本框中
//html v-model="value"实现双向绑定
<input type="text" v-model="value" />
<p>{{ value }}</p>
//js 在data中声明一个value变量
data() {
return {
value: "",
};
},
代码效果:
- 文本域中
//heml
//white-space: pre-line" 强制换行
<p style="white-space: pre-line">{{ value }}</p>
<br />
<textarea v-model="value"></textarea>
//js
data() {
return {
value: "",
};
},
代码效果:
4. 复选框
//html
<input type="checkbox" id="checkbox" v-model="value" />
<label for="checkbox">{{ value }}</label>
代码效果:
多个复选框还可绑定一个数组
<input type="checkbox" id="jack" value="Jack" v-model="arr" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="arr" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="arr" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ arr }}</span>
代码效果:
6. 单选框
<input type="radio" id="one" value="One" v-model="value" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="value" />
<label for="two">Two</label>
<br />
<span>{{ value }}</span>
代码效果:
- 选择框
<select v-model="value">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>{{ value }}</span>
代码效果:
多选绑定数组:
//multiple属性即可启用多选
<select v-model="arr" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select><br />
<span>{{ arr }}</span>
代码效果:
v-model的值绑定
上效果就明白他的用法
- 复选框
<input type="text" v-model="value" />
<input type="checkbox" v-model="value" true-value="yes" false-value="no" />
代码效果:
2. 单选框.
<input type="text" v-model="value" />
<input type="radio" v-model="value" value="a" />
代码效果:
- 选择框
<input type="text" v-model="value" />
<p>{{ value.number }}</p>
<select v-model="value">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
<option v-bind:value="{ number: 456 }">456</option>
<option v-bind:value="{ number: 789 }">789</option>
</select>
此时value绑定的是一个对象,多以想要获取必须使用对象的点语法
代码效果:
当选中时 typeof vm.value => ‘object’
vm.value.number => 123
v-model 修饰符
1. .lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步:
<input type="text" v-model.lazy="value" />
<input type="radio" v-model="value" value="a" />
代码效果:
input与change事件区别说明
1.input,input事件在input或文本框输入值发生变化的时候触发。
2.change事件是在input或文本框失焦时触发
input不会触发下拉框改变
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
<input type="text" v-model.number="value" />
这通常很有用,因为即使在 type=“number” 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符
<input type="text" v-model.trim="value" />
这个与原生js中的trim()方法是同样效果的
总结
上述虽然文字不多,但代码配效果图应该是通俗易懂了,具体原理与方法可参考官方文档