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

作者：小小林熬夜学编程 | 2024-02-16 20:42:11

踩

v-show="true" 控制

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>
1
2
3
4
5
6
7

var app = new Vue({
  el:"#app",
  data:{
     isShow:false,
     age:16
  },
  methods:{
     changeIsShow:function(){
       this.isShow = !this.isShow;
     },
     addAge:function(){
       this.age++;
     }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
1
2
3
4
5
6

var app2 = new Vue({
  el:"#app-2",
  data:{
     isShow:false,
     temperature:37,
  },
  methods:{
     changeIsShow:function(){
       this.isShow = !this.isShow;
     }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96524