Vue-学习笔记-07 v-for详解
文章目录一、当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。二、v-for 遍历数组三、v-for 遍历对象四、v-for的key五、Vue当中数组的响应式一、当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。二、v-for 遍历数组<body><d
·
一、当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式。
二、v-for 遍历数组
<body>
<div id='app'>
<ul>
<!-- 1、在遍历的过程中，没有使用我们的索引值(下标值) -->
<li v-for="item in names">{{item}}</li>
<br>
<!-- 2、在遍历的过程中，获取我们的下标值 -->
<li v-for="(item,index) in names">{{index +"---"+item}}</li>
</ul>
</div>
<script src='../js/vue.js'></script>
<script>
let vm = new Vue({
el:'#app',
data:{
names:['Mac book Pro','Mac book Air','Apple','IPhone X']
},
})
</script>
</body>
效果：
三、v-for 遍历对象
<body>
<div id='app'>
<ul>
<!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是 Value -->
<li v-for="item in info">{{item}}</li> <!--pengSir 18 1.75-->
<br>
<!-- 2、获取key 和value 注意 value是参数1 -->
<li v-for="(value,key) in info">{{key}}-{{value}}</li>
<br>
<!-- 3、获取我们的key value index -->
<li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
</ul>
</div>
<script src='../js/vue.js'></script>
<script>
let vm = new Vue({
el:'#app',
data:{
info:{
name:"pengSir",
age:18,
height:1.75
}
},
})
</script>
</body>
效果:
四、v-for的key
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
key的作用主要是为了高效的更新虚拟DOM
五、Vue当中数组的响应式
vue当中通过操作下标的方法更改数组的话，数据是没有响应式的！
使用splice方法，或vue提供的.set（）方法。
解决办法：
this.letters.splice(0,1,"bbb")
Vue.set(this.letters,0,'bbb')
<body>
<div id='app'>
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">点击</button>
</div>
<script src='../js/vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd', 'e']
},
methods: {
btnClick() {
// 拥有响应式
// 1、.unshift() 头部添加
// this.letters.unshift('bbb');
// 2、.push() 尾部添加
// this.letters.push('aaa','bbb','ccc')
// 3、.shift() 头部删除
// this.letters.shift();
// 4、.pop() 尾部删除
// 4、this.letters.pop()
// 5、splice(start,length,value)//插入元素/删除元素/替换
// 删除元素：(start,要删除几个元素)
// .splice(1) 删除1后边的所有元素
// 替换元素: (start,被替换的元素的个数,新的元素)
// 插入元素: (start,0,要插入的元素)
// this.letters.splice(1,0,"aa")
// 6 .sort() 排序
// this.letters.sort();
// 7 .reverse() 翻转
// this.letters.reverse()
// 没有响应式 通过索引值修改数组元素
// this.letters[0]="bbb"
// 这两种方法拥有响应式
// this.letters.splice(0,1,"bbb")
// Vue.set(this.letters,0,'bbb')
}
},
})
</script>
</body>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献19条内容
所有评论(0)