VUE学习：vue基础07————VUE语法对内容处理：条件渲染

最新推荐文章于 2024-08-04 16:07:55 发布

北凉冬

最新推荐文章于 2024-08-04 16:07:55 发布

阅读量108

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117171921

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文深入讲解Vue.js中的条件渲染，包括v-if的基本和多次判断用法，v-if与v-else-if、v-else的组合使用，以及在登录场景中的应用。此外，还介绍了template标签在没有统一父级标签时的作用，以及v-show如何通过改变display属性控制元素的显隐。文章通过实例展示了这些指令的使用，帮助读者更好地理解和掌握Vue.js条件渲染的技巧。

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

提示：
本文为VUE栏目：VUE学习：vue基础07————VUE语法对内容处理：条件渲染

前言

本文继续学习VUE语法对内容的处理。

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

条件渲染

v-if

v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素，概念上和java的if 逻辑判断一致。

v-if的使用

（一）基本使用

<body>
<div id="app">
    <p v-if="msgShow">{{msg}}</p>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "你好，世界",
            msgShow: true,
        },
        methods: {
        }
    });
</script>

页面结果：你好，世界。表达式判定为真，所以插入p标签

（二）多次判断用法

<body>
<div id="app">
    <p v-if="age<=12">儿童</p>
    <p v-else-if="age<=18">儿童</p>
    <p v-else>成年</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 22,
        },
        methods: {
        }
    });
</script>

页面结果为成年。

特别注意：条件渲染语句之间不能有其他额外的标签干扰

（三）延伸运用

登录案例演示v-if控制表单的显示

切换用户名登录和手机号登录

<body>
<div id="app">
    <div class="login">
        <div v-if="isPhone" key="phone">
            <label for="phone"> 手机号</label>
            <input type="text" id="phone" name="phone" placeholder="请输入手机号">
        </div>
        <div v-else key="username">
            <!--条件渲染指令必须写在标签上，需要控制多个标签的时候，一般会给多个标签添加一个公用的父级标签-->
            <div>
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
            </div>
            <div>
                <label for="respwd">密码</label>
                <input type="password" id="respwd" name="respwd" placeholder="请输入密码">
            </div>

        </div>
        <button type="button" @click="change">切换登录方式</button>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isPhone: true
        },
        methods: {
            change: function () {
                this.isPhone = !this.isPhone;
            }
        }
    });
</script>

上述案例中，在methods定义一个change方法，访问data中的数据，控制登录方式的显示。

v-if切换标签的时候，为了高效渲染页面，采用的部分替换方案而不是完整替换。

设置不同的key值来确保每次都会完全重新渲染，结合实际需求来决定要不要设置key

template标签

有些标签或有些特定条件下不能给多个标签设置统一父类标签时，使用vue提供的专用模板标签来实现。

template标签是一个纯粹的包裹容器，他不会再页面中被显示

<body>
<div id="app">
    <template v-if="age>=18">
        <p>今年{{age}}岁</p>
        <p>是成年人了</p>
    </template>
    <template v-else>
        <p>今年{{age}}岁</p>
        <p>是未成年人</p>
    </template>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 22,
        },
        methods: {
        }
    });
</script>

被控制的标签本事如果有统一的父级标签，可以直接使用，如果没有统一的父级标签，不推荐自己加div包裹，而应该使用template标签包裹。

v-show标签

v-show和v-if使用时一致的，但是v-show只有这一个标签来单独使用，并且v-show是操作标签的dispaly属性控制标签的显示和隐藏。

<body>
<div id="app">
    <p show="age>18">成年人</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 22,
        },
        methods: {
        }
    });
</script>