vue 第七天（循环遍历）

￡神魔★判官ぃ 2022-11-05 00:46 242阅读 0赞

# vue 第七天（循环遍历） #

## v-for循环 ##

### 1、v-for 遍历数组 ###

**数组 语法 v-for="(要循环的定义的变量,index 也就是下标) in 要循环的数组"**

**v-for="(item,index) in name" 加下标**

**v-for=“item in name” 不加下标**

<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” 不加下标**

<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值”**

<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 数组的排序 ####