vue中的v-if和v-show 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="content">
    {{ add(2,3) }}    <!-- 5  -->
    <button v-on:click="handlerClick">转换</button>     <!-- v-on:click  绑定click事件  -->
    <div class="box1" v-show="isShow"></div>  <!--  //控值得是样式 -->
    <div class="box2" v-if="isShow"></div>   <!-- 删除dom-->
    <!--
             v-if vs v-show
        v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

        v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

        相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

        一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。-->
        <div v-if="Math.random()>0.8">
            Now you see me
        </div>
        <div v-else>
             Now you don't
        </div>
        <!--
        v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。-->
        <!--2.1.0 新增 v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：-->
            <div v-if="type === 'A'">
              A
            </div>
            <div v-else-if="type === 'B'">
              B
            </div>
            <div v-else-if="type === 'C'">
              C
            </div>
            <div v-else>
              Not A/B/C
            </div>
</div>

<script src='./vue.js'></script>
<script>
    //数据驱动试图
    new Vue({
        el: '#content',
        data() {
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true,
                type:'A',
            }
        },
        methods: {
            // add:function(x,y){
            //
            // },   //简写为下面的样式
            add(x, y) {
                console.log(this.num);   // 1
                return x + y
            },
            handlerClick() {
                //数据驱动
                console.log(this);
                this.isShow = !this.isShow

            }
        }
    })
</script>
</body>
</html>

 

posted @ 2018-12-01 16:44  团子emma  阅读(96)  评论(0)    收藏  举报