vue v-if指令

约定不等于承诺〃 2023-10-02 17:22 56阅读 0赞

### 指令 ###

指令的英文：directive，vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载

#### v-if ####

v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染  
基本使用：

<p v-if="false">我是第一行dom元素</p>
    <p v-if="true">我是第二行dom元素</p>

![在这里插入图片描述][c970b784cb9f4c5189c29f0a6391b0ff.png]

我们工作中不是使用布尔值直接进行渲染，而是通过data带有布尔值的进行渲染

<body>
        <div id="app">
            <p v-if="boo">我是第一行dom元素</p>
            <p v-if="!boo">我是第二行dom元素</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el: '#app',
                data:{
          
                    boo: false
                }
            })
        </script>
    </body>

![在这里插入图片描述][297e6e1ffae746d68701ba1dfc5726ff.png]

第二种情况是通过使用表达式进行逻辑判断

<body>
    <div id="app">
        //当boo的值等于100的时候再显示
            <p v-if="boo == 100">我是第一行dom元素</p>
            <button @click="add">按我加1</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el: '#app',
                data:{
          
                    boo: 95
                },
                methods:{
          
                    add(){
          
                        this.boo++
                    }
                }
            })
        </script>
    </body>

v-if的显示根本原理一个是通过对值的隐式转换，一个就是通过对表达式的判断得出的布尔值得来的  
我们将案例进行深入演变

<body>
        <div id="app">
            <h2>{
       {boo}}</h2>
            <p v-if='boo >= 0 && boo <= 5'>我是5</p>
            <p v-if='boo >= 6 && boo <= 10'>我是10</p>
            <p v-if='boo >= 11 && boo <= 15'>我是15</p>
            <p v-if='boo >= 16 && boo <= 20'>我是20</p>
            <p v-if="boo > 20">我是大于20</p>
            <button @click="add">按我加1</button>
            
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el: '#app',
                data:{
          
                    boo: 0
                },
                methods:{
          
                    add(){
          
                        this.boo++
                    }
                }
            })
        </script>
    </body>

![在这里插入图片描述][608ed3252cdd415fae52f372d8346010.png]

上面的代码是通过v-if一层一层进行判断的，实际上是可以通过v-else-if和v-else进行分支判断

需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔

`上面的代码写法是错误的`，因为div不能在v-if和v-else之间进行拆分  
正确的写法：

[c970b784cb9f4c5189c29f0a6391b0ff.png]: https://img-blog.csdnimg.cn/c970b784cb9f4c5189c29f0a6391b0ff.png
[297e6e1ffae746d68701ba1dfc5726ff.png]: https://img-blog.csdnimg.cn/297e6e1ffae746d68701ba1dfc5726ff.png
[608ed3252cdd415fae52f372d8346010.png]: https://img-blog.csdnimg.cn/608ed3252cdd415fae52f372d8346010.png