上一篇说到vue的指令,指令是vue比较基础但是非常重要的知识,上篇只提到了v-bind、v-text、v-html、v-on等,这篇讨论一下编程语言不可绕开的条件和循环结构。
1、v-if的作用是控制元素的显示与隐藏,v-if后面的变量或表达式为真时,元素显示,否则隐藏。与其配合使用的指令还有v-elseif、v-else,和JavaScript的条件判断原理相同。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<label>请输入年龄:<input v-model="age"></label>
<button v-on:click="nameShowFlag = !nameShowFlag">点击</button>
<p v-if="nameShowFlag">名字:{{ name }}</p>
<p v-else-if="age >= 18">你今年{{ age }}岁,你是个成年的猪</p>
<p v-else>你今年{{ age }}岁,你个未成年的猪</p>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return {
name: '猪八戒',
nameShowFlag: true,
age: 12
}
}
});
</script>
</body>
</html>
2、和v-if类似的指令有v-show,两者的区别是v-if是通过移除dom和填充都没来实现dom的隐藏与显示的,v-show是通过样式的display属性来控制的。两者能够同时胜任元素的显示和隐藏工作,但是他们有一些使用上的讲究,v-if是惰性的,如果条件为假那么什么都不做,条件为真时才会创建元素;v-show是无论真假都要创建元素,然后判断条件的真假通过样式来控制,所以v-show有更高的初始渲染消耗。但是后续的显示隐藏切换,v-show只需通过样式即可实现控制,无需创建和销毁dom,所以对于频繁切换显示隐藏的功能,推荐使用v-show,因为v-if有更高的切换消耗。
3、v-for循环结构,当页面需要循环渲染相同的标签只是内容不同时,就可以使用v-for,通常用来渲染一个列表、下拉选项、菜单等
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>用户列表</h3>
<ul>
<li>姓名 年龄 住址</li>
<li v-for="item in users">
{{item.username}} {{item.age}} {{item.address}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return {
users: [
{username: '唐僧', age: 28, address: '大唐'},
{username: '孙悟空', age: 520, address: '花果山'},
{username: '猪八戒', age: 300, address: '高老庄'},
{username: '沙僧', age: 250, address: '流沙河'}
]
}
}
});
</script>
</body>
</html>