Vue：循环遍历（v-for）

转载

mb5fcf3d80e40fa 2020-12-18 22:37:00

文章标签 数组响应式 html vue.js i++ 文章分类 代码人生

1、v-for

（1）遍历数组

直接遍历，不使用下标

<div id="app">
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['a1', 'b2', 'c3', 'd4']
    }
  })
</script>

Vue：循环遍历（v-for）_vue.js

在遍历的时候获取下标

<ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>

Vue：循环遍历（v-for）_vue.js_02

（2）遍历对象

只获取值

定义一个对象：

<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

获取对象：

<ul>
    <li v-for="item in info">{{item}}</li>
  </ul>

Vue：循环遍历（v-for）_vue.js_03

获取key、value、index

<ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

Vue：循环遍历（v-for）_html_04

（3）v-for绑定key

当v-for不绑定key的时候，当在数组中插入一个元素的时候需要移动大量的元素，当绑定key（要保证key的唯一性）之后就避免了移动元素，可以直接在数组中间插入元素

2、数组中的响应式与非响应式

（1）响应式方法

push

pop：删除数组中的最后一个元素

shift：删除数组中的第一个元素

unshift(): 在数组最前面添加元素

splice作用: 删除元素/插入元素/替换元素

sort()

reverse()

（2）非响应式

直接通过索引修改数组不是响应式的，可以用splice函数来进行修改，也可以用Vue.set(this.letters, 0, 'hello')来进行修改，set(要修改的对象, 索引值, 修改后的值)

3、案例

（1）案例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">
      {{index}}.{{item}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['朝花夕拾', '呐喊', '西游记', '骆驼祥子'],
      currentIndex: 0
    },
    methods: {
      liClick(index) {
        this.currentIndex = index
      }
    }
  })
</script>

</body>
</html>

主要是对v-for的运用，能够实现点击文字后样式的改变

Vue：循环遍历（v-for）_html_05

（2）购物车案例

函数、计算属性、过滤器

methods: {
    increment(index) {
      this.books[index].count++
    },
    decrement(index) {
      this.books[index].count--
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice
    }
  },
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2)
    }
  }
})

定义加减数量和移除书籍的函数，计算总价格用到的是计算属性，过滤器能够接收参数并将价格转换为两位小数的格式

界面

<div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price | showPrice}}</td>
        <td>
          <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
          {{item.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td><button @click="removeHandle(index)">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h2>总价格: {{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>