Vue.js学习之路（五）控制页面元素显示和隐藏

在HTML中国我们通常是直接使用display的属性值，来控制元素的显示与隐藏，在vue中就主要通过两种方式v-if和v-show

两者都是通过对引号中的值或者表达式进行true或false进行判断实现

  <div id="app">
        <input type="button" value="切换显示" @click="change">
        <p v-if="isShow">嘿嘿嘿- v-if</p>
        <p v-show="isShow">嘿嘿嘿 - v-show</p>
    </div>

 <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods: {
                change:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>

 看一下结果

              

显然，通过v-show控制的dom元素还在，而v-if则直接把该元素从dom树中移除了。一般情况下如果要频繁切换显示的情况我们使用v-show，因为对dom树进行操作是十分耗费资源的。

当然，前面也提到了，对于引号里的内容我们除了直接使用true或者false，还可以用表达式，这一点就不做过多展示。

插一个知识点v-bind用于设置元素的属性。使用格式v-bind:属性名="属性值"