初学Vue

最新推荐文章于 2024-10-18 17:49:11 发布

道深

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量353

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_74472152/article/details/136729402

版权

本文详细比较了Vue中的v-if和v-show在显示隐藏、优先级和使用场景上的差异，以及v-model的lazy、number和trim修饰符的功能。还介绍了事件修饰符如prevent、stop、once和capture的用法。

摘要由CSDN通过智能技术生成

1.v-if和v-show区别

1.相同的：

都可以进行显示隐藏

2.不同点：

v-if存在或不存在，v-show展示或不展示

3.优缺点：

少次的显示隐藏推荐使用v-if，减少内存的消耗

多次的显示隐藏推荐使用v-show

2.v-if和v-for优先级和使用事项

1.在vue2中v-for比v-if优先级高

2. 在vue3中v-if比v-for优先级高

3.v-if和v-for在vue2或vue3中都不要同时使用，如果需要使用在外层先使用判断，再进行循环

3.v-model修饰符

v-model的作用是双向绑定表单，能获取到input输入框的值，而且是实时获取的

1.lazy

作用：失去焦点后提交数据(data)

<body>
    <div id="app">
        <input type="text" v-model.lazy="mytext">
        {{mytext}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mytext:""
            }
        })
    </script>
</body>

2.number

作用：可以将字符串转换为有效数字number

<body>
    <div id="app">
        <input type="number" v-model.number="myage">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                myage:''
            }
        })
    </script>
</body>

3.trim

作用：清除前后空格

<body>
    <div id="app">
        <input type="text" v-model.trim="myusername">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                myusername:""
            }
        })
    </script>
</body>

4.事件修饰符

1.prevent阻止浏览器默认行为

2.stop阻止冒泡事件

3.once只能触发一次

4.capture捕获模式，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）.self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)给元素设置self后，点击当前设置的自身元素会触发点击设置self的子类，会跳过设置了self的元素