vue 第七天（循环遍历）
v-for循环
1、v-for 遍历数组
数组 语法 v-for="(要循环的定义的变量,index 也就是下标) in 要循环的数组"
v-for="(item,index) in name" 加下标
v-for=“item in name” 不加下标
<!-- v-for 表达式-->
<div id="vue_one">
<ul>
<li v-for="(value,index) in name">{
{value}}/{
{index}}</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
name: ["13","qwe","qrq"]
}
})
</script>
2、v-for 遍历对象
对象 语法 v-for="(要循环的定义的变量,对象的key键,index 也就是下标) in 要循环的数组"
v-for="(item,key) in name" 不加下标 加key键
v-for=“item in name” 不加下标
<!-- v-for 表达式-->
<div id="vue_one">
<ul>
<li v-for="(value,key,index) in name">{
{
key}}/{
{
value}}/{
{
index}}</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
name: {
zhangsan:"100分",
lisi:"80分",
wangwu:"85分",
zhaoliu:"90分",
tianqi:"100分"
}
}
})
</script>
3、v-for 绑定 :key与不绑定 :key的区别
:key=“要遍历的变量” 或者 :key=“要遍历的变量.key值”
<!-- v-for 表达式-->
<div id="vue_one">
<ul>
<li v-for="(value,key,index) in name" :key="value.lisi">{
{
key}}/{
{
value}}/{
{
index}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in name" :key="value">{
{
key}}/{
{
value}}/{
{
index}}</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
name: {
zhangsan:"100分",
lisi:"80分",
wangwu:"85分",
zhaoliu:"90分",
tianqi:"100分"
}
}
})
</script>
绑定 :key
key :0<----->1
key :1<----->2
key :2<----->3
<-----------------------key:10<-->9在此处插入，就相当于原来的数据，移动了一下位置，性能好
key :3<----->4
key :4<----->5
key :5<----->6
key :6<----->7
key :7<----->8
不绑定 :key
key :0<----->1
key :1<----->2
key :2<----->3
<-----------------------key:10<-->9在此处插入 后面的数据都会更新，效果性能不好
key :3<----->4
key :4<----->5
key :5<----->6
key :6<----->7
key :7<----->8
4、数组中的响应式方法
4.1 push 添加
this.定义的数组.push(‘aaa’)
this.定义的数组.push(‘aaa’,‘bbb’,‘cccc’)
4.2 pop 删除数组中的最后一个元素
this.定义的数组.pop()
4.3 shift 删除数组中的第一个元素
this.定义的数组.shift()
4.4 unshift 在数组最前面添加元素
this.定义的数组.unshift()
this.定义的数组.unshift(‘aaa’,‘bbb’,‘ccc’)
4.5 sort 数组的排序
this.定义的数组.sort()
4.6 reverse 数组的翻转
this.定义的数组.reverse()
4.7 splice作用： 删除元素/插入元素/替换元素
4.7.1 删除元素
this.定义的数组.splice(定义的数组,要删除的长度)
如果不写 要删除的长度 的话就会删除所有
4.7.3 插入元素
this.定义的数组.splice(定义的数组,0,value1,value2…)
4.7.3 替换元素
就是删除元素在进行添加
this.定义的数组.splice(定义的数组,从0开始要替换的长度,value1,value2…)
也可以通过下标进行修改数组
this.定义的数组.splice(从哪里开始（不修改的位置）,要替换的长度,value1,value2…)
花开一千年,花落一千年,花叶永不见