[Vue] 9.Vue的条件渲染（v-if；v-show；v-else-if；v-else）

最新推荐文章于 2024-06-05 16:31:26 发布

weiweicn!

最新推荐文章于 2024-06-05 16:31:26 发布

阅读量68

点赞数

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

本文链接：https://blog.csdn.net/u014627255/article/details/125046451

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-if: 通过控制dom的存在与否控制标签的显示与隐藏
v-show: 通过控制sytle样式去控制元素的显示与否
如果操作频繁的话建议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>10</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    show: false
                }
            },
            template: `
                <div v-if="show">
                    Hello World
                </div>
                <div v-show="show">Bye World</div>
                `,
            // template: `<div>{{message}}-{{getTotal()}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
2. v-else: 与v-if配套使用
v-else-if ：同上

<script>
        const app = Vue.createApp({
            data() {
                return {
                    show: false,
                    conditionOne: true,
                    conditionTwo: true
                }
            },
            template: `
                <div v-if="show">
                    Hello World
                </div>
                
                <div v-if="conditionOne">if</div>
                <div v-else-if="conditionTwo">elseif
                <div v-else>else</div>

                <div v-show="show">Bye World</div>
                `,
            // template: `<div>{{message}}-{{getTotal()}}</div>`
        });
        const vm = app.mount('#root')
    </script>

weiweicn!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue] 9.Vue的条件渲染（v-if；v-show；v-else-if；v-else）

v-if: 通过控制dom的存在与否控制标签的显示与隐藏v-show: 通过控制sytle样式去控制元素的显示与否如果操作频繁的话建议v-show<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view.
复制链接

扫一扫