1. 子組件給父子件傳參 然後循環
2 v -for = "(sel,selindex) in selectalls" 括號中間逗號
3. 給數據的每個對象插入屬性值
vm.$data.all.map(item => {
vm.$set(item, 'selectNum', 0)
vm.$set(item, 'selectColor', item.colors[0])
vm.$set(item, 'totalPrice', 0)
})
4. < span: class = "{active: colorindex==item.cn}"
@click = "selectcolor(item,colorindex)"
class = "colors"
v -for = "(color,colorindex) in item.colors" > {{color}} < /span>selectcolor(item, shopindex) {vm.$set(item, 'cn', shopindex)}
思路: 1. 把li最開始循環的 index拿下, 然後給li的對象添加個屬性 CN 爲index
2. 在循環的時候() in all 把這個括號裏面的index 和 li對象的CN做比較
5. 計算屬性算總價
allprice() {
nums = 0;
this.selectall.forEach(item => {
nums += item.totalPrice
})
return nums;
}
6.數組想要增加一條,先判斷這個數組有沒有,再增加
let data =this.select.find(item => item.id == items.id); 有就返回數據 沒有就是undefined
data ? items : this.select.push(items);
7.如果我們需要在數組中查找滿足某個條件的元素，就可以使用數組方法findIndex()。
這個方法會依次遍歷數組中的元素，找到第一個滿足條件的元素，然後返回該元素的索引值。如果沒有滿足條件的元素，
findIndex()就會返回-1。
let index = this.selectall.findIndex(obj => obj.id === item);
console.log(index)
if (index !== -1) {
this.selectall.splice(index, 1); 刪除數組一個對象
}
8.傳值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css" />
<script src="js/vue.js"></script>
<title></title>
<style>
img {
width: 6rem;
height: 6rem;
vertical-align: -1.5rem;
}
* {
cursor: pointer;
}
#app {
width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
ul {
border: 1px solid red;
}
li {
border: 1px solid #e5e5ea;
background: #e5e5ea;
margin-top: 1rem;
}
.center {
display: inline-block;
width: 18%;
}
.center .colors {
background: blue;
color: white;
padding: 0.5rem;
margin: 0.5em;
}
.center .colors.active {
background: red;
}
.center button {
width: 3rem;
}
.num {
background-color: white;
padding: 0 .51rem;
}
.center .cars {
width: 6rem;
background-color: red;
color: white;
float: right;
}
.carsel h1 {
text-align: center;
background: #f40;
color: white;
}
.carsel {
margin-top: 1rem;
}
.aa h2 {
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div id="app">
<shopalls :all='all' @adds="addlist" ></shopalls>
<selectall :selectalls='selectall' @cute="cute"></selectall>
<!-- <ul class="carall">
<li>
<img src="img/0-1.png" alt="">
<div class="center aa">
<h2>圓珠筆1</h2>
<span class="colors active">紅色</span> <span class="colors">紅色</span>
</div>
<div class="center">
<h1>21.00元</h1>
</div>
<div class="center">
<button>-</button>
<span class="num">0</span>
<button>+</button>
</div>
<div class="center">
<button class="cars">加入購物車</button>
</div>
</li>
</ul> -->
<!-- <div class="carsel">
<h1>已選中商品</h1>
<br>
<li>
<img src="img/0-1.png" alt="">
<div class="center ">
<h2 >圓珠筆1</h2>
</div>
<div class="center">
<span class="colors">紅色</span>
</div>
<div class="center">
<h3>總價：21.00元</h3>
</div>
<div class="center">
x1 <button class="cars">刪除</button>
</div>
</li>
<h2>總價120元</h2>
</div> -->
<h2> 總價：{{allprice}}元</h2>
</div>
<template id="shopall">
<ul class="carall">
<li v-for="(item,shopindex) in all" :key="item.id">
<img :src="item.img" alt="">
<div class="center aa">
<h2>{{item.name}}</h2>
<span :class="{active: colorindex==item.cn}" @click="selectcolor(item,colorindex,color,shopindex)"
class="colors" v-for="(color,colorindex) in item.colors">
{{color}}</span>
</div>
<div class="center">
<h1>{{item.price}}.00元</h1>
</div>
<div class="center">
<button @click="add(item,-1)">-</button>
<span class="num">{{item.selectNum}}</span>
<button @click="add(item,1)">+</button>
</div>
<div class="center">
<button class="cars" @click="buycars(item)">加入購物車</button>
</div>
</li>
</ul>
</template>
<template id="selectall">
<div class="carsel">
<h1>已選中商品</h1>
<br>
<li v-for="(sel,selindex) in selectalls">
<img :src="sel.img" alt="">
<div class="center ">
<h2>{{sel.name}}</h2>
</div>
<div class="center">
<span class="colors">
{{sel.selectColor}}
</span>
</div>
<div class="center">
<h3>總價： {{sel.totalPrice }}.00元</h3>
</div>
<div class="center">
x{{sel.selectNum }}<button class="cars" @click="del(sel.id)">刪除</button>
</div>
</li>
</div>
</template>
<script>
vm = new Vue({
el: "#app",
methods:{
addlist(item){
console.log(item+"執行了addlist")
this.selectall=item
},
cute(item){
let index = this.selectall.findIndex(obj => obj.id === item);
console.log(index)
if (index !== -1) {
this.selectall.splice(index, 1);
}
}
},
computed:{
allprice(){
nums=0;
// this.selectall.forEach(item=>{
// nums+=item.totalPrice
// })
this.selectall.forEach(function(item){
nums+=item.totalPrice
})
return nums;
}
},
watch:{
// selectall(o,p){
// console.log("變了"+o+p)
// }
},
data() {
return {
all: [{
id: 0,
name: '華晨鋼筆',
price: 20,
img: 'img/0-1.png',
colors: ['紅', '綠', '白']
}, {
id: 1,
name: '保溫水杯',
price: 120,
img: 'img/1-1.png',
colors: ['保溫', '不保溫']
}],
selectall: []
}
},
components: {
shopalls: {
template: "#shopall",
props: {
all: {
type: Array,
}
},
data() {
return {
currcolor: '',
select:[],
}
},
methods: {
add(item, num) {
let newmum = item.selectNum;
newmum = newmum + num
if (newmum <= 0) {
newmum = 0
}
item.selectNum = newmum
item.totalPrice = newmum*item.price
// item.selectNum=item.selectNum+num
console.log("執行了加減函數"+num)
},
selectcolor(item, colorindex, color,shopindex) {
this.$set(item, 'cn', colorindex)
colorindex = colorindex + 1
item.img = 'img/' + shopindex + '-' + colorindex + '.png'
item.selectColor = color
console.log(shopindex+"執行了選顏色"+colorindex)
console.log(vm.selectall[0].selectColor+'xx')
// console.log(item)
// console.log()
},
buycars(items){
// this.select.push(items)
// console.log(this.select)
let newselect=this.select;
let data =this.select.find(item => item.id == items.id);
data ? items : this.select.push(items); //傳過來的數據在select裏找到了，就替換掉。沒找到的話再push
this.$emit('adds',newselect)
console.log(data+"123")
}
},
},
selectall: {
template: "#selectall",
props: {
selectalls: {
type: Array,
}
},
methods:{
del(i){
this.$emit('cute',i)
// console.log(i)
}
}
}
}
})
vm.$data.all.map(item => {
vm.$set(item, 'selectNum', 0)
vm.$set(item, 'selectColor', item.colors[0])
vm.$set(item, 'totalPrice', 0)
})
// console.log(vm.$data.all)
</script>
</body>
</html>