hualinux 进阶 vue 1.8：vue命令（四）条件判断v-if命令_如何判断是单选题还是多选题用v-if-优快云博客

本文介绍了Vue中的条件渲染指令v-if，用于根据表达式的值决定元素是否渲染。通过v-if，元素会在条件变化时进行销毁和重建，适合于条件不频繁改变的情况。文中给出了一个简单的例子，展示了如何使用v-if实现点击按钮显示和隐藏内容的功能，并提示在频繁切换时使用v-show可能更为高效。

一、v-if用法

二、例子

这些讲vue的条件判断命令v-if，还有 v-else 、v-else-if可以自己看一下

一、v-if用法

v-if条件可以看Vue中的v-if

预期：any
用法：

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

参考：条件渲染 - v-if

二、例子

需求：点击显示再点一下隐藏某个内容，主要代码如下：（<script>引入vue.js文件我这里不再说了）

<body>
    <div id="root">
       <div v-if="show">这是隐藏的内容</div>
        <button v-on:click="t1">点我试下</button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                show: false
            },
            methods: {
                t1: function (){
                    this.show= !this.show
                }
            }
        })
    </script>
</body>

效果：