Vue基础-4(v-show、v-if控制元素显示/隐藏)

Vue基础-4

v-show指令：根据真假切换元素的显示状态
原理：修改元素的display，实现显示隐藏
指令后面的内容最终会解析为布尔值，true显示，false隐藏
数据改变之后，对应的显示状态会同步更新

例：

<div id="app">
  <h1 v-show="true">Test A</h1>
  <h1 v-show="isShow">Test B</h1>
  <h1 v-show="age >= 18">Test C</h1>
  <button @click="changeIsShow">切换显示状态</button>
  <input type="button" @click="addAge" value="涨一岁" />
</div>

var app = new Vue({
     
  el:"#app",
  data:{
     
     isShow:false,
     age:16
  },
  methods:{
     
     changeIsShow:function(){
     
       this.isShow = !this.isShow;
     },
     addAge:function(){
     
       this.age++;
     }
  }
})

v-if:根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)
本质：操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中，
表达式的值为false,元素从dom树中移除。
频繁切换使用v-show,反之使用v-if,v-show切换消耗小。

例：

<div id="app-2">
  <h2 v-if="isShow">v-if 修饰</h2>
  <h2 v-show="isShow">v-show 修饰</h2>
  <input type="button" @click="changeIsShow" value="切换v-if/v-show显示状态" />
  <h1 v-if="temperature > 35">热死了</h1>
</div>

var app2 = new Vue({
     
  el:"#app-2",
  data:{
     
     isShow:false,
     temperature:37,
  },
  methods:{
     
     changeIsShow:function(){
     
       this.isShow = !this.isShow;
     }
  }
})