【Vue】指令之v-if【Vue】学习笔记——Vue常用指令之v-if 1. v-if的使用具体实例如下： 2.总结。

【Vue】学习笔记——`Vue`常用指令之`v-if`

v-if指令是会根据表达式值的真假，切换元素是否被加载，其实是在操作dom元素。

v-if和js里的if差不多，也是会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于标签元素的判断。

1. v-if的使用

<p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>

当指令的判断isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编译时不会生成p标签。

具体实例如下：

<body> 
    <div id="app"> 
        <input type="button" value="点我切换显示" @click="changeIsShow" /> 
        <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script> 
    <script> 
        var app = new Vue({ 
            el:"#app",
            data: {
                isShow: false
            },
            methods: { 
                changeIsShow() { 
                    this.isShow = !this.isShow 
                }
            } 
        });
    </script> 
</body>

2.总结

v-if指令的作用：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

关于v-if 官方文档