Vue循环遍历

v-for遍历数组

<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: {
        names: ["why", "kobe", "james", "curry"]
      }
    })
  </script>

v-for遍历对象

<div id="app">
    <!--1. 在遍历过程中如果只是获取一个值，那么获取到的是value-->
    <ul>
      <li v-for="item in info">{{item}}</li>
    </ul>

    <!-- 2. 获取key和value,格式（value,key)-->
    <ul>
      <li v-for="(value,key) in info">{{value}}:{{key}}</li>
    </ul>

    <!-- 3. 获取key和value,index 格式（value,key, index)-->
    <ul>
      <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: {
        info: {
          name: "why",
          age: 18,
          height: 1.88
        }
      }
    })
  </script>

检测数组更新

Vue是响应式的，所以数据发生变化时,Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

 <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>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'c', 'd']
      },
      methods: {
        btnClick() {
          // 1.push方法
          // this.letters.push("aaa")

          // 2. pop方法:删除数组中的最后一个元素
          // this.letters.pop()

          // 3.shift方法：删除数组中的第一个元素
          // this.letters.shift()

          // 4.unshift方法: 在数组最前面添加元素
          // this.letters.unshift("aaa");

          // 5.splice方法 ：删除元素/插入元素/替换元素
          // 删除元素:第二个参数传入你要删除几个元素（如果没有穿，就删除后面所有元素）
          // 替换元素:第二个参数表示我们要替换的几个元素，后面的用于替换前面的元素。
          // 插入元素:第二个参数为0,后面跟上要插入的函数。
          // this.letters.splice(1, 0, "aa", "bb", "cc")

          // 6.sort()
          // this.letters.sort();

          //7.reverse()
          // this.letters.reverse();

          //注意：通过索引值修改数组中的元素,不响应，界面不刷新
          // this.letters[0] = "bbbbb";

          //可以通过splice()实现
          // this.letters.splice(0, 1, "bbbbb");

          //Vue自带的set方法也可以修改
          //set(要修改的对象，索引值，修改后的值)
          Vue.set(this.letters, 0, "bbbbb")
        }
      }
    })
  </script>