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>
- 在遍歷的時候獲取下標
<ul>
<li v-for="(item, index) in names">
{{index+1}}.{{item}}
</li>
</ul>
（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>
- 獲取key、value、index
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
（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的運用，能夠實現點擊文字后樣式的改變
（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來判斷存儲書籍的數組是不是空的，在不為空的情況下就遍歷存儲數據的數組