#vue#条件渲染

最新推荐文章于 2023-06-10 23:34:24 发布

老衲的少女心i

最新推荐文章于 2023-06-10 23:34:24 发布

阅读量156

点赞数

分类专栏：前端 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42592823/article/details/125591656

版权

前端同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

前言

提示：这里可以添加本文要记录的大概内容：

本篇文章讲的是vue中的条件渲染，

提示：以下是本篇文章正文内容，下面案例可供参考

一、 v-show


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n的值： {{n}}</h2>
        <button @click="n++">点击我n+1</button>
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">欢迎你！ {{name}}</h2>
        <h2 v-show="n === 1">我出来了，现在是n=1</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            n: 0,
            name: 'zhousujuan'
        },
    })
</script>
</html>

二、v-if


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n的值： {{n}}</h2>
        <button @click="n++">点击我n+1</button>
        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎你！ {{name}}</h2>
        <h2 v-if="n === 1">我出来了，现在是n=1</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            n: 0,
            name: 'zhousujuan'
        },
    })
</script>
</html>

三、v-else和v-else-if


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n的值： {{n}}</h2>
        <button @click="n++">点击我n+1</button>
        <!-- v-else 和 v-else-if -->
        <div v-if="n === 1">当n等于1</div>
        <div v-else-if="n === 2">当n等于2</div>
        <div v-else-if="n === 3">当n等于3</div>
        <div v-else>我是其他</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            n: 0,
            name: 'zhousujuan'
        },
    })
</script>
</html>

当然这里的v-else-if也可以转换成v-if来展示，但是我们这里的v-if是都要判断，v-else-if是逐层判断，只要有一个是满足条件的，就是跳出，但是v-if是所有的都要判断

四、v-if和tempelate的配合使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n的值： {{n}}</h2>
        <button @click="n++">点击我n+1</button>
        <!-- v-if和tempelate的配合使用 -->
        <template v-if="n===1">
            <h2>hello</h2>
            <h2>你好</h2>
            <h2>深圳</h2>
        </template>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            n: 0,
            name: 'zhousujuan'
        },
    })
</script>
</html>

template的使用是为了不影响结构，但是只能配合v-if来使用哦

总结

提示：这里对条件渲染进行总结：

   1.v-if
        写法：
            (1): v-if="表达式"
            (2): v-else-if="表达式"
            (3): v-else="表达式"
        适用于：切换频率较低的场景
        特点：不展示的DOM元素直接被移除
        注意：v-if可以和：v-else-if、v-else一起使用，但是要求结构不能被"打断"。

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



    3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到