初学者入门Vue：Vue.js中的v-text和v-html指令详解

前言

当使用Vue.js进行前端开发时，我们经常会遇到需要根据条件来显示或隐藏元素的情况。Vue.js提供了两个常用的指令，即v-show和v-if，用于实现条件渲染。本文将详细解释v-show和v-if的使用方式和对应Vue.js实例。

实例代码：

JavaScript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <vid id="app"></vid>
    <template id="my-app">
        <div>
            <h2 v-if="status===1">{{time}}</h2>
            <h2 v-else-if="status===2">{{time2}}</h2>
            <h2 v-else>{{time3}}</h2>
            <button @click="change">切换</button>

            <h2 @click="hide" v-show="show">{{time}}</h2>
            <!-- v-show是css层次的，用display:none; -->
            <!-- v-if是直接把Dom消失 -->
        </div>
    </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-8',
                    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>
</html>

1. v-show指令

v-show指令用于根据条件动态控制元素的显示和隐藏。当条件为真时，元素会显示；当条件为假时，元素会隐藏。具体使用方式如下：

html 复制代码

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

上述代码中，v-show指令绑定了Vue实例中的show属性，当show为true时，<h2>元素会显示，否则会隐藏。

需要注意的是，v-show是通过修改元素的CSS样式来实现显示和隐藏，使用了display: none属性。因此，即使元素被隐藏，它仍然存在于DOM中，只是不可见。点击函数触发后，h2标签隐藏，但仍可见。如下图：

2. v-if指令

v-if指令也用于根据条件动态控制元素的显示和隐藏，但与v-show有所不同。当条件为真时，元素会渲染到DOM中；当条件为假时，元素会从DOM中移除。具体使用方式如下：

html 复制代码

<h2 v-if="status===1">{{time}}</h2>
<h2 v-else-if="status===2">{{time2}}</h2>
<h2 v-else>{{time3}}</h2>

上述代码中，v-if指令根据不同的条件来选择渲染的元素。当status为1时，第一个<h2>元素会渲染到DOM中；当status为2时，第二个<h2>元素会渲染到DOM中；否则，最后一个<h2>元素会渲染到DOM中。

需要注意的是，v-if是通过添加或移除元素来实现显示和隐藏，因此在切换条件时，元素会被重新创建或销毁。

3.Vue.js

javascript 复制代码

const app = Vue.createApp({
    template: '#my-app',
    data() {
        return {
            time:'2023-12-8',
            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')

上述代码创建了一个Vue实例，并将#my-app模板作为渲染模板。模板中使用了v-if和v-show指令来实现条件渲染和显示隐藏。通过点击按钮和点击<h2>元素，可以改变status和show属性的值，从而动态切换元素的显示与隐藏。关于以上渲染模板的详细内容可以前往往期文章阅读初学者入门Vue：构建一个简单的计数器应用

总结：

v-show和v-if是Vue.js中用于条件渲染的指令。

v-show是通过修改元素的CSS样式来显示或隐藏元素，元素仍然存在于DOM中；
v-if是通过添加或移除元素来显示或隐藏元素，会重新创建或销毁元素。

v-show和v-if是Vue.js中用于条件渲染的指令。v-show通过修改元素的CSS样式来实现显示和隐藏，元素仍然存在于DOM中；v-if通过添加或移除元素来实现显示和隐藏，会重新创建或销毁元素。选择使用v-show还是v-if取决于具体的需求。如果需要频繁切换元素的显示与隐藏，可以使用v-show，因为它只是修改CSS样式，性能较好。如果条件变化较少且有较多的静态内容，可以使用v-if，因为它会根据条件动态地添加或移除元素，可以减少DOM操作次数。