孙空空的Vue之路-Day04-条件渲染

最新推荐文章于 2024-10-10 15:43:59 发布

小....赵

最新推荐文章于 2024-10-10 15:43:59 发布

阅读量98

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38817451/article/details/109250819

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<!--条件渲染-->
<!--    v-if    -->
<!--    v-else  -->
<!--    v-show  -->
<div id="demo">
    <!--v-if和v-else的展示操作-->
    <p v-if="flag">爱你</p>
    <p v-else>不爱你</p>
    <button @click="flag=!flag">改变从此刻发生</button>
    
    <!--v-show的展示-->
    <p v-show="ok">结婚</p>
    <p v-show="!ok">不结婚</p>
    <button @click="ok=!ok">改变从此刻发生</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            flag:false,
            ok:false
        }
    })
</script>
</body>
</html>

v-if 、v-else 和 v-show的区别
1.v-if 、v-else：在进行条件显示时，内存不会保留否定的条件，如果当前页面要进行大量的条件显示不建议使用。
2.v-show：进行条件显示时，当前页面会保留否定条件的页面，如果页面进行大量的条件显示推荐使用。
【ps】作为Vue的小白，如果有错误信息，希望大家在评论取留言指正，谢谢大家~