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来判断存储书籍的数组是不是空的，在不为空的情况下就遍历存储数据的数组