vue内置内容——指令

本文将对vue的指令进行讲解，但并没有讲完，根据作者学习进度进行更新。我们将学习到以下这些指令：（上一篇文章提到了一些可能对你有帮助的一些知识点。juejin.cn/post/731087... ）

arduino 复制代码

    v-text
    v-html
    v-show
    v-if
    v-else
    v-else-if

通过CDN使用vue

你可以借助 script 标签直接通过 CDN 来使用 Vue：

xml 复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

v-text

在Vue.js中，v-text 是一种指令，用于更新元素的文本内容。它类似于插值表达式 {{ }}，但有一些区别。与插值表达式 {{ }} 不同，v-text 不会解析 HTML。它将文本内容作为纯文本对待，不会将其中的HTML代码进行解释。这在某些情况下可能是有用的，因为它可以防止潜在的 XSS 攻击。

v-html

v-html 是Vue.js中的一个指令，用于将数据作为 HTML 解释并插入到元素中。这允许你动态地渲染包含 HTML 结构的文本内容。需要注意的是，使用 v-html 可能存在安全风险，因为它允许直接插入HTML。确保在使用用户输入的数据时进行适当的过滤和验证，以防止潜在的跨站脚本攻击（XSS）。

通过一个实例来了解一下

xml 复制代码

<body>
   <div id="app"></div>
   <template id="my-app">
       <h2>{{msg}}</h2>
       <h2 v-text="msg"></h2>

       <h1 v-html="article"></h1>
   </template>

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

   <script>
       const app = Vue.createApp({
           template: '#my-app',
           data(){
               return {
                   msg: '指令的使用',
                   article: '<p>这是第一个段落</p><p>这是第二个段落</p>'
               }
           }
       })
       app.mount('#app')
   </script>
</body>

v-show

在Vue.js中，v-show 是一种用于根据条件显示或隐藏元素的指令。与 v-if 不同，v-show 不是通过添加或删除元素来实现的，而是通过CSS的display属性进行切换。

与 v-if 不同，v-show 在初始渲染时会始终保留元素，并使用 CSS 控制其显示或隐藏，这使得在频繁切换可见性的情况下，v-show 的性能可能更好。然而，如果元素的初始渲染时就需要隐藏，或者在显示和隐藏之间切换的次数较少，通常使用 v-if 会更合适。

v-if

在Vue.js中，v-if 是一种用于条件性地渲染元素的指令。通过 v-if，你可以根据指定的表达式的真假情况来决定是否渲染或移除特定的元素。

需要注意的是，与 v-show 不同，v-if 在初始渲染时会决定是否渲染元素，而不是使用 CSS 控制其显示或隐藏。如果元素的显示与隐藏比较频繁或取决于异步操作的结果，v-show 可能更适合，因为它在切换时不会重复渲染整个元素。

v-else

在Vue.js中，v-else 是与 v-if 一起使用的指令，用于指定在 v-if 表达式为假时渲染的内容。它必须立即跟在一个带有 v-if 的元素或 v-else-if 元素之后。

需要注意的是，v-else 元素必须立即跟在带有 v-if 或 v-else-if 的元素之后，并且它们必须属于同一父元素。这是因为 Vue.js 会在编译时将它们关联在一起。

一个实例：（这里有两个效果，一个切换一个隐藏，可以到vscode中自行体验）

xml 复制代码

<body>
    <div id="app"></div>
    <template id="my-app">
        <!-- <h2 v-if="status === 1">{{time}}</h2>
        <h2 v-if="status === 2">{{time2}}</h2>
        <h2 v-if="status === 3">{{time3}}</h2> -->

        <h2 @click="hide" v-show="show">{{time}}</h2>

        <!-- v-if v-show 都是控制悬殊隐藏，但后者是css上面的隐藏，但前者是html上的隐藏 -->
        
        <!-- <button @click="change">切换</button> -->
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            template: '#my-app',
            data(){
                return {
                    time: '2023-12-08',
                    time2: '2023年12月08日',
                    time3: '2023/12/08',
                    status: 1,
                    show: true
                }
            },
            methods: {
                change (){
                    if(this.status === 3){
                        this.status = 0
                    }
                    this.status++
                },
                hide(){
                    this.show = false
                }
            }
        })
        app.mount('#app')
    </script>
</body>

v-show 是可以人为放开的

v-if则不能

都看到这了，你不点个赞，说点什么再走？