条件渲染.

最新推荐文章于 2024-10-01 20:12:28 发布

阿瞒有我良计15

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量48

点赞数

分类专栏： # VUE 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_56444564/article/details/129871160

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章详细介绍了Vue.js中v-if和v-show指令的用法，包括它们的写法、适用场景、特点以及与DOM的关系。v-if适用于切换频率较低且需要完全移除元素的情况，而v-show则适用于切换频繁但不想销毁元素的场景。同时，文章通过代码示例展示了两者的使用差异和结合v-else与v-else-if的用法。

摘要由CSDN通过智能技术生成

1.v-if：

写法：

v-if="表达式"
v-else-if="表达式"
v-else

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

2.v-show：

写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--false隐藏  v-show做条件渲染-->
    <h2 v-show="true">欢迎来到{{name}}</h2><br>
    <h2 v-show="a">欢迎来到{{name}}</h2><br>

    <!--    v-if做条件渲染-->
    <h2 v-if="true">欢迎来到{{name}}</h2><br>
    <h2 v-if="1 === 1">欢迎来到{{name}}</h2><br>

    <h2>当前n的值为：{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-show="n === 1">Angular</div>
    <div v-show="n === 2">React</div>
    <div v-show="n === 3">Vue</div>

    <div v-if="n === 1">Angular</div>
    <div v-if="n === 2">React</div>
    <div v-if="n === 3">Vue</div>

    <!--    v-else v-else-if-->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>哈哈</div>

    <!--    template搭配v-if使用，但是v-show不可以 template不会破坏项目结构-->
    <template v-if="n === 1">
        <h2>hello</h2>
        <h2>hello</h2>
        <h2>hello</h2>
    </template>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            name: "hdc",
            a: true,
            n: 0
        }
    })
</script>
</body>
</html>