Vue：循環遍歷（v-for）

時間 2020-12-19

標籤 html vue 數組 app 函數 this spa code htm 對象欄目 HTML 简体版

原文原文鏈接

一、v-forhtml

（1）遍歷數組vue

直接遍歷，不使用下標

<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>

在遍歷的時候獲取下標

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

（2）遍歷對象數組

只獲取值

定義一個對象：app

<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>

獲取key、value、index

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

（3）v-for綁定keythis

當v-for不綁定key的時候，當在數組中插入一個元素的時候須要移動大量的元素，當綁定key（要保證key的惟一性）以後就避免了移動元素，能夠直接在數組中間插入元素spa

二、數組中的響應式與非響應式code

（1）響應式方法htm

push對象

pop：刪除數組中的最後一個元素

shift：刪除數組中的第一個元素

unshift(): 在數組最前面添加元素

splice做用: 刪除元素/插入元素/替換元素

sort()

reverse()

（2）非響應式

直接經過索引修改數組不是響應式的，能夠用splice函數來進行修改，也能夠用Vue.set(this.letters, 0, 'hello')來進行修改，set(要修改的對象, 索引值, 修改後的值)

三、案例

（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的運用，可以實現點擊文字後樣式的改變

（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>

用v-if和v-else來判斷存儲書籍的數組是否是空的，在不爲空的狀況下就遍歷存儲數據的數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。