購物車：

<template><div><table><caption><h1>購物車</h1></caption><tr><th></th><th>編號</th><th>商品名稱</th><th>商品價格</th><th>購買數(shù)量</th><th>操作</th></tr><tr v-for="item in cartlist" :key="item.id"><td><input type="checkbox" v-model="item.checkbox"></td><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="item.count--" :disabled="item.count>=1">-</button>{{item.count}}<button @click="item.count++">+</button></td><td><a href="#" @click.prevent="del(index)">刪除</a></td></tr><tr><td colspan="3" align="right">總價</td><td colspan="3">{{totalprice.toFixed(2)}}</td></tr></table></div> </template> <script>export default {name: 'app',data () {return {cartlist: [{ id: 1, checkbox: true, name: '《細說PHP》', price: 10, count: 1 },{ id: 2, checkbox: true, name: '《細說網(wǎng)頁制作》', price: 10, count: 1 },{ id: 3, checkbox: true, name: '《細說JavaScript語》', price: 10, count: 1 },{ id: 4, checkbox: true, name: '《細說DOM和BOM》', price: 10, count: 1 },{ id: 5, checkbox: true, name: '《細說Ajax與jQuery》', price: 10, count: 1 },{ id: 6, checkbox: true, name: '《細說HTML5高級API》', price: 10, count: 1 }]}},computed: {totalprice: {get () {let sum = 0for (let book of this.cartlist) {if (book.checkbox) {sum += book.price * book.count}}return sum}}},methods: {del (index) {this.cartlist.splice(index,1);}} } </script> <style scoped> table {width:608px;border:1px solid #888888;border-collapse:collapse; }td,th {border:1px solid #888888;padding: 10px; } </style>

效果:

刪除的步驟:

<td><a href="#" @click.prevent="del(index)">刪除</a></td>

del (index) {
this.cartlist.splice(index,1);
}
< style scoped>使得組件的樣式只在自己當前的組件中有效，而不能在子組件中有效
props的默認形式：props:[‘name1’,‘name2’,‘name3’…];
也可以指定類型：
props:{
msg:{
type:String
},
title{
type:String
},
article{
type:Array
}
},
父組件向子組件傳數(shù)據(jù)：用props
子組件向父組件傳數(shù)據(jù):用$emit

總結

以上是生活随笔為你收集整理的vue3.x案例 购物车的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。