Vue：循环遍历（v-for）
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
·
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来判断存储书籍的数组是不是空的，在不为空的情况下就遍历存储数据的数组
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)