Vue分支循环结构
一、v-if 、v-else-if、 v-else 、v-show
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>分支结构</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
年龄：<input v-model="age"><br>
阶段：
<div v-if="age < 10">儿童</div>
<div v-else-if="age >10 && age < 20">青年</div>
<div v-else>其他</div>
<div v-show="age === '100'"> 百岁老人 </div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
{
el: '#app', // el 属性值 要和上面html中id的值相同（多个#）
data: { // data 属性 值是个js对象 里面用来存放需要用到的数据
age:'1'
},
methods: { // 方法 也是一个js对象 里面可以定义多个方法逗号隔开
}
}
);
</script>
注意v-if 和v-show的区别
二者都可以控制DOM元素的显示和隐藏
（1）v-if 条件如果是false 那么该指令所在的DOM元素将不会渲染到页面 而v-show条件如果是false DOM元素只是简单的改变样式不显示 实际上已经渲染到了页面
（2）v-show 实际上就是控制了样式 display:none
二者的使用场景 如果页面需要经常处理元素的显示和隐藏 推荐使用v-show （元素已渲染到页面）
如果经过v-if判断之后的元素不需要再做动态的显示隐藏逻辑处理了 则推荐使用v-if （控制DOM元素的渲染比较耗费性能）
二、v-for循环结构
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in dogs">{{item}}-----{{index}}</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
{
el: '#app', // el 属性值 要和上面html中id的值相同（多个#）
data: { // data 属性 值是个js对象 里面用来存放需要用到的数据
dogs:[
'拉拉',
'滴滴',
'哗哗',
]
},
methods: { // 方法 也是一个js对象 里面可以定义多个方法逗号隔开
}
}
);
</script>
拉拉——————0
滴滴——————1
哗哗——————2
（括号内第一个参数为遍历的元素对象 第二个参数为元素的下标从0开始）
<li v-for="(item,index) in dogs">{{item}}-----{{index}}</li>
遍历数组内存的对象数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>分支机构</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in dogs">
<span>姓名:{{item.name}}</span>
<span>年龄:{{item.age}}</span>
<span>序号:{{index}}</span>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
{
el: '#app', // el 属性值 要和上面html中id的值相同（多个#）
data: { // data 属性 值是个js对象 里面用来存放需要用到的数据
dogs:[
{
name:'拉拉',
age:5,
},
{
name:'滴滴',
age:3,
},
{
name:'哗哗',
age:6,
},
]
},
methods: { // 方法 也是一个js对象 里面可以定义多个方法逗号隔开
}
}
);
</script>
- 姓名：拉拉 年龄：5 序号：0
- 姓名：滴滴 年龄：3 序号：1
- 姓名：哗哗 年龄：6 序号：2
另外建议for循环遍历生成DOM元素使用 key 属性 取唯一值 这样能够帮助Vue区分不同的元素从而提高性能
用法 一般key取对象的id
<li :key="index" v-for="(item,index) in dogs">
<span>姓名:{{item.name}}</span>
<span>年龄:{{item.age}}</span>
<span>序号:{{index}}</span>
</li>
v-for除了能遍历数组之外还能够遍历对象 也可结合v-if使用
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<ul>
<!-- 值 key名称 索引-->
<li v-if="index===0 || index===1" :key="index" v-for="(value,key,index) in myDog">
{{value}}---{{key}}----{{index}}
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue(
{
el: '#app', // el 属性值 要和上面html中id的值相同（多个#）
data: { // data 属性 值是个js对象 里面用来存放需要用到的数据
myDog:{
name:'拉拉',
age:'5',
color:'白色',
weight:'10kg'
}
},
methods: { // 方法 也是一个js对象 里面可以定义多个方法逗号隔开
}
}
);
// 原生js 遍历对象
var myDog = {
name:'拉拉',
age:'5',
color:'白色',
weight:'10kg'
};
for (let key in myDog) {
console.log(key+'====>>>>'+myDog[key])
}
</script>
拉拉—name—0
5——age——1
拉拉——name——0
5——age——1
白色——color——2
10kg——wight——3
浙公网安备 33010602011771号