先写一个例子
创建一个HelloWorld.html文件，开始写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
title: 'Hello World'
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到Hello World成功显示出来。
v-if, v-show 指令
用来判断是否加载html的DOM
v-if 的使用方法并不复杂，只需要挂在元素上即可，与之配套的有 v-else-if 和 v-else，这两个只能个 v-if 配套使用。
创建一个v-if.html文件，开始写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-if="isShow">isShow 为 true，所以我要显示出来</div>
<div v-else>isShow 为 false，所以我要隐藏出来</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
isShow: true
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到isShow 为 true，所以我要显示出来成功显示出来。
如果将 isShow 的值修改为 false，则显示出isShow 为 false，所以我要隐藏出来
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
创建一个v-show.html文件，开始写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-show="isShow">isShow 为 true，所以我要显示出来</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
isShow: false
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到页面一片空白什么都没有。但是，当打开浏览器调试界面按F12时，可以看到有以下代码出现：
1
| <div style="display: none;">isShow 为 true，所以我要显示出来</div>
|
由此可以看出，其实内容已经加载出来了，只是使用了 css 中的 display: none; 给隐藏了。
v-if 和 v-show 的区别
- v-if 在切换中将组件上的事件监听器和子组件销毁和重建。
- v-show 调整了 dispaly 属性，可以使客户端操作更加流畅。
- v-show 有更高的初始渲染开销，而 v-if 有更高的切换开销。
简单点理解就是：v-if被判定为假时，Vue不会做任何事情，而 v-show 不管为真假，Vue都会进行DOM渲染。