vue 카 트 사례 실현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
*{
padding: 0;
margin:0
}
ul li{
width: 1200px;
display: flex;
align-items: center;
justify-content: center;
}
li div,.total{
display: inline-block;
width:200px;
height: 50px;
line-height: 50px;
text-align: center;
}
button{
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div id="app">
<ul>
<goodsitem
v-for="item in goodslist"
:item="item"
:key="item.id"
@onchange="(type)=>{handleCount(type,item)}"
@ondelete="()=>{handleDelete(item.id)}">
</goodsitem>
<div class="total" style="padding-left: 113px"> :{{total}}</div>
</ul>
</div>
</body>
<script>
var computed={
props:{
count:{
type:Number,
require:true
}
},
methods:{
handleCount(type){
this.$emit('onchange',type)
}
},
template:`<div style="width:200px">
<button @click="handleCount('sub')">-</button>
<span>{{count}}</span>
<button @click="handleCount('add')" >+</button>
</div>
`
}
var goodsitem={
props:{
item:{
type:Object,
require:true
}
},
methods:{
handleCount(type){
this.$emit('onchange',type)
},
handleDelete(){
this.$emit('ondelete')
}
},
components:{
computed
},
template:`<li>
<div>{{item.goodsName}}</div>
<div>{{item.price}}</div>
<computed :count="item.count" @onchange="handleCount"></computed>
<div>{{item.sum}}</div>
<div><button @click="handleDelete"> </button></div>
</li>
`
}
var app=new Vue({
el:"#app",
data:{
goodslist:[{
id:1,
goodsName:" ",
price:100,
count:1,
sum:100
},{
id:2,
goodsName:" ",
price:200,
count:2,
sum:400
},{
id:3,
goodsName:" ",
price:300,
count:3,
sum:900
},{
id:4,
goodsName:" ",
price:400,
count:1,
sum:400
},
]
},
methods:{
handleCount(type,item){
if(type=='add'){
item.count+=1
}else{
if(item.count==1){
this.handleDelete(item.id)
return
}
item.count-=1
}
item.sum=item.count*item.price
},
handleDelete(id){
return this.goodslist=this.goodslist.filter((item)=>{
return id!=item.id
})
}
},
computed:{
total(){
return this.goodslist.reduce((total,item)=>{
return total+=item.sum
},0)
}
},
components:{
goodsitem
}
})
</script>
</html>
소장 하고 있 는 vue 카 트 논리 코드 를 다시 한 번 공유 해 드 리 겠 습 니 다.원작 자의 공유 에 감 사 드 립 니 다.
<template>
<div class="hello">
<div class="main">
<div v-if="hasList">
<div class="cart-box">
<div class="cart-list" v-for="(item,index) in carts" :key="index">
<!-- <icon v-if="item.selected" type="success" color="red" data-index="index" class="cart-pro-select" @click="selectList"/>
<icon v-else type="circle" class="cart-pro-select" data-index="index" @click="selectList"/> -->
<router-link to="/"><img class="cart-thumb" :src="item.image" /></router-link>
<p class="cart-pro-name">{{item.title}}</p>
<p class="cart-pro-price">￥{{item.price}}</p>
<div class="cart-count-box">
<p class="cart-count-down" @click="minusCount(item.id)" data-obj="obj" data-index="index">-</p>
<p class="cart-count-num">{{item.num}}</p>
<p class="cart-count-add" @click="addCount(item.id)" data-index="index">+</p>
</div>
<p class="cart-del" @click="deleteList" data-index="index">×</p>
</div>
</div>
<div class="cart-footer">
<!-- <icon v-if="selectAllStatus" type="success_circle" color="#fff" class="total-select" @click="selectAll"/>
<icon v-else type="circle" color="#fff" class="total-select" @click="selectAll"/> -->
<div class="order-icon">
<router-link to="/"><img src="../../static/image/icon3.png" /></router-link>
</div>
<p> </p>
<p class="cart-toatl-price">￥{{totalPrice}}</p>
</div>
</div>
<div v-else>
<div class="cart-no-data"> ~</div>
</div>
</div>
</div>
</template>
<script>
// import {Toast} from 'vant'
export default {
data () {
return {
carts: [{id: 1, title: ' ', image: '../../static/image/s5.png', num: 4, price: 0.01, selected: true},
{id: 2, title: ' 500g', image: '../../static/image/s6.png', num: 1, price: 0.03, selected: true}],
hasList: true,
totalPrice: 0,
selectAllStatus: true,
obj: {
name: 'hello'
}
}
},
created () {
// this.$set({
// hasList: true,
// carts: [
// {id: 1, title: ' ', image: '../../static/image/s5.png', num: 4, price: 0.01, selected: true},
// {id: 2, title: ' 500g', image: '../../static/image/s6.png', num: 1, price: 0.03, selected: true}
// ]
// })
this.getTotalPrice()
},
methods: {
selectList (e) {
console.log(e)
let carts = this.carts
let index = 1
const selected = carts[index].selected
carts[index].selected = !selected
this.setData({
carts: carts
})
this.getTotalPrice()
},
deleteList (e) {
const index = e.currentTarget.dataset.index
let carts = this.carts
carts.splice(index, 1)
this.$set({
carts: carts
})
if (!carts.length) {
this.$set({
hasList: false
})
} else {
this.getTotalPrice()
}
},
selectAll (e) {
let selectAllStatus = this.data.selectAllStatus
selectAllStatus = !selectAllStatus
let carts = this.carts
for (let i = 0; i < carts.length; i++) {
carts[i].selected = selectAllStatus
}
this.$set({
selectAllStatus: selectAllStatus,
carts: carts
})
this.getTotalPrice()
},
addCount (e) {
let carts = this.carts
let num = carts[e - 1].num
num = num + 1
carts[e - 1].num = num
this.$set(this.carts, carts)
this.getTotalPrice()
},
minusCount (e) {
// const obj = e.currentTarget.dataset.obj
let carts = this.carts
let num = carts[e - 1].num
if (num <= 1) {
return false
}
num = num - 1
carts[e - 1].num = num
this.$set(this.carts, carts)
this.getTotalPrice()
},
getTotalPrice () {
let carts = this.carts
let total = 0
for (let i = 0; i < carts.length; i++) {
if (carts[i].selected) {
total += carts[i].num * carts[i].price
}
}
this.$set({
carts: carts,
totalPrice: total.toFixed(2)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- scoped css -->
<style scoped>
.cart-box{
padding-bottom: 50px;
}
.cart-list{
position: relative;
padding: 10px 10px 10px 142px;
height: 92px;
border-bottom: 1px solid #e9e9e9;
}
.cart-list .cart-pro-select{
position: absolute;
left: 10px;
top: 45px;
width: 25px;
height: 25px;
}
.cart-list .cart-thumb{
position: absolute;
top: 10px;
left: 42px;
width: 92px;
height: 92px;
}
.cart-list .cart-pro-name{
display: inline-block;
width: 150px;
height: 52px;
line-height: 25px;
overflow: hidden;
}
.cart-list .cart-pro-price{
display: inline-block;
float: right;
height: 52px;
line-height: 25px;
}
.cart-list .cart-count-box{
position: absolute;
left: 142px;
bottom: 10px;
width: 125px;
height: 40px;
}
.cart-list .cart-count-box p{
display: inline-block;
line-height: 40px;
p-align: center;
}
.cart-count-down,.cart-count-add{
position: absolute;
top:-5px;
font-size: 22px;
width: 25px;
height: 100%;
}
.cart-count-num{
margin-left: 17px;
width: 75px;
}
.cart-del{
position: absolute;
right: 10px;
bottom: 0px;
width: 40px;
height: 40px;
line-height: 40px;
p-align: center;
font-size: 22px;
}
.cart-footer{
position: fixed;
bottom: 15%;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
box-sizing: border-box;
background: #AB956D;
color: #fff;
}
.total-select{
position: absolute;
left: 10px;
top: 12px;
width: 22px;
height: 22px;
}
.order-icon{
position: absolute;
right: 20px;
top: 12px;
width: 24px;
height: 24px;
}
.order-icon image,.order-icon navigator{
display: block;
width: 24px;
height: 24px;
}
.cart-toatl-price{
float: right;
width: 60px;
}
.cart-no-data{
padding:20px 0;
color: #999;
p-align: center;
}
</style>vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
