Vue中的条件渲染

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

学会改变Lxw

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

阅读量135

点赞数

分类专栏： Vue学习笔记记录文章标签： vue js

本文链接：https://blog.csdn.net/lxw88586390/article/details/107084719

版权

Vue学习笔记记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-if和v-show标签使用的区别

标签v-if和v-show都能控制一个模板标签是否显示出来
两者的区别就是：V-if标签只要对应的值是false，就不会存在于dom节点之上，v-show这个标签，一旦对应的值为false，它对应的dom依然存在，只不过是以display：none的形式存在于dom之上

v-if的高级用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue中的条件渲染</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="show === 'a'">
            This is A
        </div>
        <div v-else-if="show === 'b'">
            This is B
        </div>
        <div v-else>This is others</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                show:"a"
            }
        })
    </script>
</body>

</html>

学会改变Lxw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的条件渲染

v-if和v-show标签使用的区别标签v-if和v-show都能控制一个模板标签是否显示出来两者的区别就是：V-if标签只要对应的值是false，就不会存在于dom节点之上，v-show这个标签，一旦对应的值为false，它对应的dom依然存在，只不过是以display：none的形式存在于dom之上v-if的高级用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录