day 2

最新推荐文章于 2025-12-11 16:05:35 发布

原创最新推荐文章于 2025-12-11 16:05:35 发布 · 381 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文详细介绍了Vue.js中的v-model修饰符，如.lazy用于延迟提交，.number用于数值转换，.trim用于去除空格。同时讲解了v-model的基本概念、原理以及如何使用自定义指令实现特定功能。

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("----------------");
                }
            }
        }