1 v-if&v-show

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)

    if操作的是dom show 操作的样式
    如果频繁切换dom使用v-show,当数据一开时就确定下来使用v-if更好一些,如果if通过内部指令不会执行了
    只有dom从显示到隐藏 或者隐藏到显示 才能使用vue的动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
</head>
<body>
<div id="app">
<span v-if="flag">你看的见我</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
</html>

2 区别总结

  • v-show:操作的是元素的display属性
  • v-if:操作的是元素的创建和插入
  • 相比较而言v-show的性能要高