码迷,mamicode.com
首页 > 其他好文 > 详细

第二章、条件指令

时间:2019-11-14 15:24:15      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:head   sele   data   isp   app   gpo   show   width   word   

概念:

  • v-if | v-show 可以已根据布尔值判断这个标签是否显示

  • v-if | v-show比较:两者绑定的变量值都是 true|false
  • v-if在隐藏时,不被渲染 | v-show在隐藏时,采用display: none存在
  • 2、v-if更为强大些有分支家族 :v-if、v-else-if、v-else

<div id="app" v-cloak>
        <!-- v-if | v-show 条件指令: v-if="变量" | v-show="变量" -->

        <!--1、v-if | v-show比较:两者绑定的变量值都是 true|false-->
        <p>
            <button @click="toggleAction(true)">显示</button>
            <button @click="toggleAction(false)">隐藏</button>
        </p>
        <!--v-if在隐藏时,不被渲染 | v-show在隐藏时,采用display: none存在-->
        <div class="box b1" v-if="is_show"></div>
        <div class="box b2" v-show="is_show"></div>

        <!--2、v-if、v-else-if、v-else 分支家族 -->
        <p>
            <button @click="toggleShow(‘red‘)"></button>
            <button @click="toggleShow(‘blue‘)"></button>
            <button @click="toggleShow(‘green‘)">绿</button>
        </p>
        <div class="box r" v-if="color == ‘red‘"></div>
        <div class="box b" v-else-if="color == ‘blue‘"></div>
        <div class="box g" v-else></div>
    </div>
</body>

详细代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        }
        .box {
            width: 200px;
            height: 200px;
        }
        .b1 {background-color: orange;}
        .b2 {background-color: cyan;}

        .r {background-color: red;}
        .b {background-color: blue;}
        .g {background-color: green;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- v-if | v-show 条件指令: v-if="变量" | v-show="变量" -->

        <!--1、v-if | v-show比较:两者绑定的变量值都是 true|false-->
        <p>
            <button @click="toggleAction(true)">显示</button>
            <button @click="toggleAction(false)">隐藏</button>
        </p>
        <!--v-if在隐藏时,不被渲染 | v-show在隐藏时,采用display: none存在-->
        <div class="box b1" v-if="is_show"></div>
        <div class="box b2" v-show="is_show"></div>

        <!--2、v-if、v-else-if、v-else 分支家族 -->
        <p>
            <button @click="toggleShow(‘red‘)"></button>
            <button @click="toggleShow(‘blue‘)"></button>
            <button @click="toggleShow(‘green‘)">绿</button>
        </p>
        <div class="box r" v-if="color == ‘red‘"></div>
        <div class="box b" v-else-if="color == ‘blue‘"></div>
        <div class="box g" v-else></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            is_show: false,
            color: ‘red‘
        },
        methods: {
            toggleAction(is_show) {
                this.is_show = is_show;
            },
            toggleShow(color) {
                this.color = color;
            }
        }
    })
</script>
</html>

第二章、条件指令

标签:head   sele   data   isp   app   gpo   show   width   word   

原文地址:https://www.cnblogs.com/demiao/p/11857159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!