11.条件渲染

最新推荐文章于 2023-02-28 13:36:22 发布

M丶GentleMan

最新推荐文章于 2023-02-28 13:36:22 发布

阅读量754

点赞数

分类专栏： Vue学习文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/ma628991/article/details/121412801

版权

Vue学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

01.条件渲染

<!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>Document</title>
    <!-- 创建新的页面，记得引入。 -->
    <script type='text/javascript' src="../JS/vue.js"></script>

</head>

<body>
    <div id="root">
        <!-- 使用v-show做渲染，可以是布尔值，可以是表达式 -->
        <!-- 节点在，只是动态的隐藏和显示，display -->
        <div v-show='true'>1.欢迎来到{{name}}</div>
        <!-- '1==2'是错误的，因此是false，隐藏 -->
        <div v-show='1==2'>2.欢迎来到{{name}}</div>

        <!-- 使用v-if做渲染，可以是布尔值，可以是表达式 -->
        <!-- 节点在，只是动态的隐藏和显示，display -->
        <div v-if='false'>3.欢迎来到{{name}}</div>
        <div v-if='1==1'>4.欢迎来到{{name}}</div>
        <hr>

        <!-- 需求：点击按钮，每增加一次，就显示一条信息。 -->
        <h2>此时N的值是：{{n}}</h2>
        <button @click='n++'>点我给N++</button>

        <!-- 特别注意：v-if和v-else-if -->
        <!-- v-if有多个条件的，会一一查找和执行，而v-else-if不会，他在找到合适的之后会停止执行。 -->
        <!-- 下面我们用v-else-if更合适 -->
        <div v-if='n==1'>A</div>
        <!-- <div v-if='n==2'>B</div>
        <div v-if='n==3'>C</div> -->

        <!-- 特别注意！！！使用v-if的时候，div之间不能有别的东西。 -->
        <!-- （如果中间夹杂了此div，则下面的BC不会执行。） -->
        <!-- <div>我是捣乱的</div> -->
        <div v-else-if='n==2'>B</div>
        <div v-else-if='n==3'>C</div>

        <!-- 当然还有else -->
        <!-- 因为else不用跟任何的要求，所以打开就会执行D -->
        <div v-else>D</div>

        <!-- v-if和template -->
        <!-- 如果我们想让N个div在满足的时候同时显示，我们可以这么做。 -->
        <!-- 复杂写法，不推荐 -->
        <h2 v-if='n==1'>欢迎</h2>
        <h2 v-if='n==1'>学习</h2>
        <h2 v-if='n==1'>VUE</h2>

        <!-- 利用v-if和template搭配不会影响结构，会自动去掉外面的div盒子，只能和v-if配合使用。 -->
        <template div v-if='n==1'>
            <h2 v-if='n==1'>欢迎</h2>
            <h2 v-if='n==1'>学习</h2>
            <h2 v-if='n==1'>VUE</h2>
        </template>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'vue学习',
                n: 0
            }
        })
    </script>
</body>

</html>