10 vue 遍历
2020-09-13 本文已影响0人
滔滔逐浪
1 v-for 遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍历</title>
</head>
<body>
<div id="app">
<ul>
<!--遍历过程没有使用下标识-->
<li v-for="item in names">{{item}}</li>
</ul>
<!--在遍历中获取下标识符-->
<ul>
<li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
names:['wee','eee','rrrr','tttt','tttt33']
}
})
</script>
</body>
</html>
2 v-for 遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍历对象</title>
</head>
<body>
<div id="app">
<ul>
<li>{{info.name}}</li>
<li>{{info.age}}</li>
<li>{{info.height}}</li>
</ul>
<ul>
<!--1，在遍历对象的过程中，入股只获取一个值，name得到的是value--->
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<ul>
<!--1，在遍历对象的过程中，入股只获取一个值，name得到的是value--->
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
info:{
name: 'why',
age: 18,
height: 1.88
}
}
})
</script>
</body>
</html>
3, v-for使用过程中添加key
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for使用过程中添加key</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
letters:['1','2','4','5','55']
}
})
</script>
</body>
</html>
4 哪些数组是响应式的
1 push方法
//2 pop（）删除数组中的最后的一个元素
3，shift(): 删除数组中的第一个元素
4 unshift在数组最前面添加元素
5 sort 排序
reverse() 反转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哪些数组是响应式的</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters " :key="item">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
letters: ['a','b','c','d']
},
methods:{
btnClick(){
//1 push方法
// this.letters.push("e");
// this.letters.push("e",'33','444'); 添加多个元素
//通过索引值修改数组中的元素：
// this.letters[0]='555';
//2 pop（）删除数组中的最后的一个元素
// this.letters.pop();
//3，shift(): 删除数组中的第一个元素
// this.letters.shift();
//4 unshift在数组最前面添加元素
// this.letters.unshift("33");
// this.letters.unshift("33",'555',"///77");// 添加多个元素
//splice作用： 删除元素/插入元素/替换元素
//删除元素： 第二个参数传入你要删除几个元素
//替换元素： 第二个参数，表示我们要替换几个元素，后面适用于替换前面的元素
//插入元素 第二个参数0，并且后面要跟上你插入的元素。
//splice(start)
// this.letters.splice(1,1)
// this.letters.splice(1,3,22,222,666)
// this.letters.splice(1,0,'33','3333')
//5 sort 排序
// this.letters.sort();
//reverse() 反转
//reverse() 反转
// this.letters.reverse()
}
}
})
</script>
</body>
</html>
