for循环的问题
来源：2-18 Vue中DOM操作
qq_一个人一個人_0
2018-11-28 16:28:20
var app = new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: 'iPhone 8',
price: 8888,
count: 1
},
{
id: 2,
name: 'Huwei Mate10',
price: 6666,
count: 1
},
{
id: 3,
name: 'Lenovo',
price: 6588,
count: 1
}
],
selectList: [],
checked:
false
},
computed: {
totalPrice: function() {
var total = 0;
for (var i = 0, len = this.selectList.length; i < len; i++) {
var index = this.selectList[i];
var item = this.list[index];
if (item) {
total += item.price * item.count;
} else {
continue;
}
}
return total;
}
},
methods: {
handleReduce: function(index) {
var item = this.list[index];
if (item.count < 2) {
return;
}
item.count--;
},
handleAdd: function(index) {
var item = this.list[index];
item.count++;
},
handleRemove: function(index) {
this.list.splice(index, 1);
},
swapCheck: function() {
var selectList = document.getElementsByName('selectList');
var len = selectList.length;
if (this.checked) {
for (var i = 0; i < len; i++) {
var item = selectList[i];
item.checked = false;
}
this.checked = false;
this.selectList = [];
} else {
for (i = 0; i < len; i++) {
var item = selectList[i];
if (item.checked = true) {
this.selectList.push(selectList[i].value);
}
}
this.checked = true;
}
}
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 购物车</title>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<link href="index.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<p id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList"></td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
{{ item.count }}
<button @click="handleAdd(index)">+</button>
</td>
<td><button @click="handleRemove(index)">移除</button></td>
</tr>
</tbody>
</table>
<p>总价：￥ {{ totalPrice }}</p>
</template>
<p v-else>购物车为空！</p>
</p>
<script src="index.js"></script>
</body>
</html>[v-cloak] {
display: none;
}
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,
td {
padding: 8px 16px;
border: 1px solid black;
text-align: center;
}
th {
background-color: gray;
}老师，这个VUE简易购物车里面的JS代码部分里的swapCheck方法里的第二个for循环里面和if搭配一起使用是起到一个监视器的作用吗？就是监视如果哪个商品被选中了就将其selectList[i].value放到this.selectList中，是这个意思吗？
写回答
2回答
-
同学你好，可以这里理解的，点击上面商品名称这个按钮的时候，若下面的商品被选中，就放到this.selectList中。这个不是课程中讲到的，这里是看同学学习努力，破例为同学解答的哦。
祝学习愉快！
1 -
好帮手慕糖
2018-11-28
同学你好，这是哪里的代码？这里是不是写错了，一个等号的话，是赋值，两个等号的话，才是判断是否等于true哦。
祝学习愉快！
0h018-11-28
相似问题