v-model的修饰符
v-model修饰符
.lazy 失去焦点后提交值
.number有效转换"1"== 1 为数字
.trim清除前后空格
laze实例
<textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
结果会提交文本域的值给formData.other
number实例
年龄:<input type="number" v-model.number="formData.ages">
v-model.number有效转换"1"== 1 为数字
trim实例
姓名:<input type="text" v-model.trim="formData.userName">
去除字词前后的空格
v-model
是什么?
1.双向数据绑定,既可以从data流向页面,也可以由页面流向data
2.通常用于表单收集,v-model默认绑定value值
3.v-model:value=““或v-model=””(简写)
原理?
1.v-model本质是一个语法糖
2.v-bind绑定数据
3.oninput数据传递
directives局部自定义指令语法
directives:{
"nums":{
// bind成功绑定时调用
bind(element,binding){
console.log(element);
console.log(binding);
element.innerText = binding.value*10;
binding.value = binding.value*10;
console.log("----------------");
},
// inserted成功插入页面调用
inserted(element,binding){
console.log(element);
console.log(binding);
element.innerText = binding.value*100;
binding.value = binding.value*100;
console.log("----------------");
},
// update重新解析时(改变)调用
update(element,binding){
console.log(element);
console.log(binding);
element.innerText = binding.value+binding.oldValue;
binding.value = binding.oldValue;
console.log("----------------");
}
}
}