Vue基础教程(五) - 博客详情

Vue包含两种条件渲染指令： - v-if：条件指令 - v-show：条件指令

v-if 例如：

<!DOCTYPE html>
<html lang="zh">
<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</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <div id="app">
        <!--可以使用单个复选框绑定到布尔值-->
        <input type="checkbox" v-model="accept">接受霸王条款
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h1 v-if="accept">用户接受此条款</h1>
        <h1 v-else>用户不接受此条款</h1>
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
               accept: false
            }
        })
    </script>
</body>
</html>

运行效果如下：

v-show 上面的例子，可以使用v-show改写,和上面的功能完全相同，如下：

<!DOCTYPE html>
<html lang="zh">
<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</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <div id="app">
        <!--可以使用单个复选框绑定到布尔值-->
        <input type="checkbox" v-model="accept">接受霸王条款
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h1 v-show="accept">用户接受此条款</h1>
        <h1 v-show="!accept">用户不接受此条款</h1>
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
               accept: false
            }
        })
    </script>
</body>
</html>

v-if与v-show对比

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。