vue.js -- 条件渲染

最新推荐文章于 2022-11-14 22:01:31 发布

爱划水de鲸鱼哥～

最新推荐文章于 2022-11-14 22:01:31 发布

阅读量120

点赞数

分类专栏： Vue3 文章标签： vue js html javascript

本文链接：https://blog.csdn.net/m0_47901007/article/details/118544521

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

本文详细介绍了Vue.js中v-if、v-else、v-else-if及v-show的用法，通过代码演示展示了它们在条件渲染场景下的不同应用。v-if根据条件销毁DOM，v-show则是通过CSS隐藏，频繁使用推荐使用v-show以提高性能。

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

条件渲染

v-if的用法

代码演示：

<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>vue条件渲染</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    show: false
                }
            },
            template:'<div v-if="show">{{content}}</div>'
        })
  		const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

v-if、v-else的用法

代码演示：

 const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    show: false
                }
            },
            template:`
            <div v-if="show">{{content}}</div>
            <div v-else>else</div>
            `
        })
        const vm = app.mount('#root');

页面效果：
在这里插入图片描述

v-if、v-else-if、v-else的用法

代码演示：

const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    show: false,
                    condition: true
                }
            },
            template:`
            <div v-if="show">{{content}}</div>
            <div v-else-if="condition">elseif</div>
            <div v-else>else</div>
            `
        })
        const vm = app.mount('#root');

页面效果：
在这里插入图片描述

v-show的用法

代码演示：

const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    show: true
                }
            },
            template:`
            <div v-show="show">{{content}}</div>
            `
        })
        const vm = app.mount('#root');

页面效果：
在这里插入图片描述

v-if 和 v-show 的区别

代码演示：

 const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!',
                    show: true
                }
            },
            template:`
            <div v-if="show">{{content}}</div>
            <div v-show="show">{{content}}</div>
            <div v-if="!show">{{content}}</div>
            <div v-show="!show">{{content}}</div>
            `
        })
        // vm 代表vue 应用的根节点
        const vm = app.mount('#root');