![](https://csdnimg.cn/release/download_crawler_static/19749227/bg5.jpg)
vif velse vshow
vue 提供了 vif 和 vshow 两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来
看一下使用两个指令各有什么效果:
vif : 如果 vlaue 为 true, 当前标签会输出在页面中
vshow: 就会在标签中添加 display 样式, 如果 vlaue 为 true, display=block, 否则是 none
v-else : 与 v-if 一起使用, 如果 value 为 false, 将当前标签输出到页面中
6 <meta charset="UTF‐8">
7 <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
8 <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">
9 <title>Document</title>
10 </head>
11 <body>
12 <div id="app">
13 <div v‐html="message"></div>
14 </div>
15 </body>
16 <script src="https://unpkg.com/vue/dist/vue.js"></script>
17 <script>
18 var vm = new Vue({
19 el: '#app',
20 data: {
21 message: "<div>您好,我是徐庶!</div>",
22 }
23 })
24 </script>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF‐8">
5 <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
6 <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <div>
12 <button>我是添加按钮,我一直在</button>
13 </div>
14 <div>
15 <button id="show" v‐show="deleteButton">我是删除按钮,我通过 v‐show 控制显隐</button>
16 <button v‐on:click="deleteButton = true">设置显示</button>
17 <button v‐on:click="deleteButton = false">设置隐藏</button>
18 </div>
19 <div>
20 <button id="if" v‐if="editButton">我是修改按钮,我通过 v‐if 控制显隐</button>
21 <button v‐on:click="editButton = true">设置显示</button>
22 <button v‐on:click="editButton = false">设置隐藏</button>