Vue.js 指令详解：v-text、v-html、v-show 与 v-if 的使用与区别-CSDN博客

本文链接：https://blog.csdn.net/qq_60672911/article/details/124831408

本文详细介绍了Vue.js中的几个核心指令：v-text用于设置元素的innerText，不解析HTML；v-html则可以解析HTML并显示；v-show通过改变CSS的display属性控制元素的显隐；v-if则直接根据表达式决定元素是否存在于DOM中。v-if和v-show的主要区别在于DOM操作的频率和方式，v-if适合不频繁切换，v-show适合频繁切换。此外，还提供了代码示例来展示这些指令的用法。

在这里插入图片描述
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1. v-text相当于元素的innerText()
设置元素的内容，同时会覆盖元素内的内容
2. v-html相当于元素的innerHTML();
设置元素的内容，同时会覆盖元素内的内容
如果指令获取的数据里面有html标签，会自动解析为html样式

<body>
 <!--v-text&v-html -->
    <div id="app">
        <!-- v-text 不能解析 标签  相当于innerText-->
        <p v-text="msg"></p>
        <!-- v-html 能够解析标签 -->
        <p v-html="msg"></p>
    </div>
</body>
</html>
<script src="../vue.js"></script>
<script>
    const vm = new new Vue({
        el: '#app',
        data: {
            msg: '<h1>2000</h1>'
        }
    })
</script>

3. v-show=‘表达式’
可以根据表达式值的真假，来控制页面元素的显示(true）和隐藏(false)控制元素显示和隐藏
本质:就是css的display: block display:none`

    <style>
        p {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <button v-on:click="fn">切换</button>
        <p v-show="isShow"></p>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                fn() {
                    this.isShow = !this.isShow
                }
            }
        });
    </script>

4. v-if:根据表达值的真假,切换元素的显示和移除(操纵dom元素)
v-else-if:如果if表达式不成立，则判断当前表达式，成立显示元素，否则移除
v-else:如果if不成立，则显示v-else绑定的daom元素。无需表达式

    <div id="app">
        <ul>
            <li v-if='num>11'>离离原上草</li>
            <!-- 如果  if 判断成立 不会走下面  相反如果成立 继续执行 继续判断 -->
            <li v-else-if='num>10'>一岁一枯荣</li>
            <li v-else-if='num>12'>野火烧不尽</li>
            <li v-else>春风吹又生</li>
        </ul>
        <!--  v-show 成立  只是对元素进行一个隐藏和显示   v-if和v-else 成立则是对 元素进行 删除和插入 -->
        <p v-show="false">11111111</p>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                num: 10
            },
            methods: {}
        });
    </script>

5. v-if和v-show的区别:
v-if：纯粹的元素插入和删除
v-show：纯粹的css的显示和隐藏

v-if与v-show区别
v-show指令的元素始终会被渲染到HTML
它只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式
v-if指令满足条件是，会渲染到html中，不满足条件时，是不会渲染到html中的

v-if 指令有更高的切换消耗
v-if当条件成立的时候会将元素加上，不成立的时候，就会移除dom，并且内部的指令不会执行
v-show 指令有更高的初始渲染消耗
v-show只是简单的隐藏和显示
如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变 使用v‐if 较好片