1.指令v-show
1.1指令v-show的使用-对话框
控制一个元素的显示隐藏
<元素 v-show="条件表达式">
结果:
-
如果条件表达式执行结果为true,则当前元素显示——会去掉display:none
-
如果条件表达式执行结果为false,则当前元素隐藏——会自动将v-show替换为display:none
案例1-对话框的打开和关闭
设计一个页面,页面中有1个按钮A和1个对话框B(对话框里面有1个关闭按钮C),要求实现点击按钮A后,显示对话窗口B,点击对话窗口里面的关闭按钮C,则关闭对话窗口。
实现参考代码如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.dialog_window {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 200px;
background-color: #fdb692;
font-size: 24px;
line-height: 30px;
}
.close_button {
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="app">
<h4>单击打开对话框按钮时,让对话框显示</h4>
<button @click="onClickOpenDialog">打开对话框</button>
<div class="dialog_window" v-show="isShow">
<button class="close_button" @click="onClickCloseDialog">关闭对话框</button>
<div>
这里有很多对话框显示的内容,比如产品介绍 文本说明
...
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: false,
},
methods: {
onClickOpenDialog() {
this.isShow = true;
},
onClickCloseDialog() {
this.isShow = false;
}
}
})
</script>
</body>
1.2指令v-show的使用-动态显示按钮
在分页操作时,用指令v-show实现上一页、下一页按钮的动态显示。要实现的页面需要实现:
- 当前第几页pno和共几页 pcount
- 每单击下一页按钮,pno+1
- 只有pno<pcount时,下一页按钮才显示!
- 每单击上一页按钮,pno-1
- 只有pno>1时,上一页按钮才显示!
案例
分页按钮动态显示,参考代码如下:
<body>
<div id="app">
<h2>上一页下一页按钮动态显示</h2>
<div>
<button v-show="pno >1" @click="onLast">上一页</button>
<span>第{{pno}}页/共{{pcount}}页</span>
<button v-show="pno<pcount" @click="onNext">下一页</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
pno: 1,
pcount: 5
},
methods: {
onNext() {
this.pno++;
},
onLast() {
this.pno--;
}
}
})
</script>
</body>
2.指令v-if、v-else的使用
v-show如果控制两个元素二选一显示隐藏,必须把判断条件在每个元素上都重复写一遍,代码繁琐!控制两个元素二选一显示隐藏,可以用指令v-if、v-else。
<元素1 v-if="判断条件"/>
<元素2 v-else/>
渲染结果:
如果判断条件返回true,就显示第一个元素,删除第二个元素
如果判断条件返回false,就显示第二个元素,删除第一个元素
强调:
两个元素之间不能插入其他元素
比较v-show和v-if
v-show采用display:none 隐藏元素 -效率高,因为未改变DOM树结构
v-if 采用直接删除元素隐藏元素,可能会频繁修改DOM树-效率略低
案例
动态显示用户登录注册信息
设计页面,根据用户是否登录的不同状态显示不同的内容,如果用户登录,显示用户名等信息,隐藏注册按钮。如果用户没有登录,显示注册按钮。
实现参考代码如下:
<body>
<div id="app">
<div v-if="!isLogin">
<a href="javascript:;" @click="onLogin">登录</a> | <a href="javascript:;">注册</a>
</div>
<div v-else>
welcome dingding
|
<a href="javascript:;" @click="onLogout">注销</a>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isLogin: false
},
methods: {
onLogin() {
this.isLogin = true;
},
onLogout() {
this.isLogin = false;
}
}
})
</script>
</body>
参见官方文档
https://cn.vuejs.org/v2/guide/conditional.html#v-if
3.指令v-else-if的使用
控制多个元素多选一的显示或隐藏。
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>
强调: 多个元素之间不能插入其他元素
案例
用v-else-if指令实现根据不同的PM25值,显示不同的表情图片
参考代码如下:
<body>
<div id="app">
<h1>空气净化器</h1>
<h2>{{pm25}}</h2>
<img v-if="pm25<100" src="../img/1.png">
<img v-else-if="pm25<200" src="../img/2.png">
<img v-else-if="pm25<300" src="../img/3.png">
<img v-else src="../img/4.png">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
pm25: 180
},
created() {
setInterval(() => {
let pm25 = Math.random() * 400;
this.pm25 = Math.round(pm25);
}, 2000);
},
});
</script>
</body>
提示:
- 案例中用到的4个图片文件,可以钉钉课程群文件中下载对应文件名为1.png、2.png、3.png、4.png。created()是Vue实例被创建后回调的生命周期钩子函数,后续还会介绍。
- 尽量避免在View部分使用条件渲染