v-for遍历数组，对象与响应式方法

2024-03-14 14:44:52

v-for

预期：Array | Object | number | string | Iterable (2.6 新增)
用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
```
<div v-for="item in items">
  {{ item.text }}
</div>
```
另外也可以为数组索引指定别名 (或者用于对象的键)：
```
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
```
响应式方法
push() ：在数组后面插入元素
unshift() 在数组前面插入元素
shift() 删除数组前面第一个元素
pop() 删除数组最后面第一个元素

splice()作用：删除元素、插入元素、替换元素
        //第一个参数为开始元素位置
        //删除元素，第二个参数传入删除元素的个数（如果没有传，就是删除后面所有元素）
//        this.letters.splice(1,2)
        //插入元素，第二个参数为0，后面参数为插入元素的值
//        this.letters.splice(1,0,'ff','dd')
        //替换元素，第二个参数为替换元素的个数，后面参数为替换元素的值,要与替换个数相同的元素
//        this.letters.splice(1,2,'ff','dd')



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历数组，对象与响应式方法</title>
</head>
<body>
<div id="app">
  <ul>
    <!-- 遍历数组，或遍历数组及其下标index-->
    <li v-for="item in list">{{item}}</li>
    <li v-for="(item,index) in list">{{index}}-{{item}}</li>
    <!-- 遍历对象，或遍历键值对(value,key) ，还可以加上下标index-->
    <li v-for="item in info">{{item}}</li>
    <li v-for="(value,key) in info">{{key}}： {{value}}</li>
    <li v-for="(value,key,index) in info">{{index}}--{{key}}： {{value}}</li>
<!-- key 标识item，item得保障唯一性，为了更高效的dom,例如加入数组一个元素，不绑定key时，
    插入元素后面的元素会后移，如链，绑定key后，就在中间加入元素，其他元素不变，如键值对一样（不是键值对）-->
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click = "butClick">响应按钮</button>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      list: ['语文','数学','英语'],
      letters: ['a','b','c','d'],
      info: {
        name: 'wu',
        age: 18,
        height: 188,
      }
    },
    methods: {
      sub: function () {
      },
      butClick(){
//       //push() 在数组后面插入元素
//        this.letters.push('ee'),
//        this.letters.push('ee','ff','dd')

//        //unshift() 在数组前面插入元素
//        this.letters.unshift('gg')
//        this.letters.unshift('gg','hh','ii')

//        //shift() 删除数组前面第一个元素
//        this.letters.shift()

//        //pop() 删除数组最后面第一个元素
//        this.letters.pop()

        //splice()作用：删除元素、插入元素、替换元素
        //第一个参数为开始元素位置
        //删除元素，第二个参数传入删除元素的个数（如果没有传，就是删除后面所有元素）
//        this.letters.splice(1,2)
        //插入元素，第二个参数为0，后面参数为插入元素的值
//        this.letters.splice(1,0,'ff','dd')
        //替换元素，第二个参数为替换元素的个数，后面参数为替换元素的值,要与替换个数相同的元素
//        this.letters.splice(1,2,'ff','dd')

        //替换元素的写法
        //1、 数组的值直接改变（错误）
//        this.letters[0] = 'bbb'
        // 2、 splice() 方法替换 （正确，一般用）
//        this.letters.splice
        //3、 vue自带的方法 set(对象，索引值，‘修改后的值’)
//        Vue.set(this.letters,0,'bbb')
      },

    }
  })
</script>
</body>
</html>

码农公寓

v-for

相关文章