Vue.js学习笔记三——Vue的条件指令

最新推荐文章于 2022-07-25 10:38:40 发布

武汉小喽啰

最新推荐文章于 2022-07-25 10:38:40 发布

阅读量166

点赞数

分类专栏： # vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/93237863

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. v-if与v-show指令都可以控制元素的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <div id="app">
       <input type="button" @click="togethor" value="切换"/>

       <h4 v-if="flag">我是v-if</h4>

       <h4 v-show="flag">我是v-show</h4>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
               flag:true
            },
            methods:{
               togethor(){
                   this.flag = !this.flag;
               }
            }
        });    
    </script>
</body>
</html>

2. 特点：
2.1 v-if的特点：每次都会重新删除或创建元素
2.2 v-show的特点；每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式来实现元素的显示与隐藏。

3. 比较：
3.1 v-if有较高的切换性能消耗
3.2 v-show有较高的初始渲染消耗
总结：
1. 如果元素涉及到频繁的切换，最好不要使用 v-if，推荐使用v-show
2. 如果元素可能永远也不会被用户看到，则推荐使用v-if

小结：
1. 插值表达式：
1.1 v-cloak
1.2 v-text
1.3 v-html
1.4 v-bind（缩写 :）
1.5 v-on（缩写 @）
1.6 v-model：只能应用于表单元素
1.7 v-for：在v-for要会用key属性（只接受number和string类型）
1.8 v-if
1.9 v-show
2. 事件修饰符
2.1 .stop
2.2 .prevent
2.3 .capture
2.4 .self
2.5 .once

3. 结构解析：
3.1 el 指定要控制的区域
3.2 data 是个对象，指定了控制的区域内要用到的数据
3.3 methods 虽然带了个s后缀，但是是个对象，这里定义了一些自定义的方法
3.4 在 VM 实例中，如果要访问data上的数据，或者要访问methods中的方法，必须带this
4. 在vue中绑定样式的两种方式：
4.1 v-bind:class
4.2 v-bind:style