• 实现单选时的价格，全选时价格
• 单选效果图

• 全选效果图

html

<template>
<!-- 淘宝结算购物车 -->
<div class="settlement-bill"> <div class="settlement-group"><div class="settlement-item" v-for="(item,index) in items" :key="item.id"><i  class="iconfont" @click="radioCheck(item,index)":class=" item.isChecked ? 'icon-yuanyixuan' : 'icon-yuanweixuan'" ></i><img :src="item.imgUrl" alt=""><div class="item-right"><p>{{item.content}}</p><span class="item-money">${{item.money}}</span><div class="item-num"><span @click="reduce(index)">-</span><span>{{item.num}}</span><span @click="add(index)">+</span></div></div></div></div><div class="settlement-bottom"><div class="bottom-left"><i @click="allCheck" class="iconfont " :class="checked ? 'icon-yuanyixuan' : 'icon-yuanweixuan' "></i><p>全选</p></div><div class="bottom-right"><p>合计<span class="total-money">{{total}}</span></p><div class="bottom-total">结算({{num}})</div></div><div class="clear"></div></div>
</div>
</template>

js

<script>
export default {data(){return {checked: false,items: [{id: 0,imgUrl: '../../static/timg.jpg',content: '云南白药牙膏家用去黄去口臭美白口气清新585g牙膏牙刷套装',money: 99,num: 1,},{id: 1,imgUrl: '../../static/maiguo.jpg',content: '湖南小台芒果带箱10斤小台芒果新鲜水果包邮',money: 39.9,num: 1},{id: 2,imgUrl: '../../static/baixiangguo.jpg',content: '广西新鲜热带水果百香果西番莲鸡蛋果10斤中果酸爽香甜',money: 69.8,num: 1}]}},computed: {total(){let sum = 0;this.items.forEach(item=>{if(item.isChecked == true)sum += (item.money*item.num)})return Math.round(sum*100)/100;},num() {let num = 0;this.items.forEach(item=>{if(item.isChecked == true)num += item.num})return num;}},methods: {// 减少宝贝reduce(index) {if(this.items[index].num === 1) return this.items[index].num--},// 增加宝贝add(index) {this.items[index].num++;},radioCheck(item,index) {let tmpState = !item.isChecked//改变单个状态this.$set(item,'isChecked',tmpState)//检测选择状态if(tmpState){let n = 0;this.items.forEach(itemu => {if(itemu.isChecked) n++;})if(n == this.items.length)this.checked = true;}else {this.checked = false;}},allCheck(){this.checked = !this.checked;for(let i = 0,len = this.items;i < len.length;i++){this.$set(this.items[i],'isChecked',this.checked)}}}}
</script>

css

<style lang="less">
* {padding: 0;margin: 0;
}
html,body,#app {height: 100%;
}
.settlement-bill {width: 100%;height: 100%;background:#e9eaeb;.settlement-group {padding: 20px;box-sizing: border-box;.settlement-item {position: relative;width: 100%;padding: 10px 5px;margin-bottom: 15px;box-sizing: border-box;background: #fff;.iconfont {position: absolute;top: 50%;left: 10px;margin-top: -10px;font-size: 20px;&.icon-yuanyixuan {color: orangered;}}img {display: inline-block;width: 100px;height: 100px;margin-left: 25px;}.item-right {display: inline-block;vertical-align: top;width: calc(100% - 130px);p {word-break: break-all;text-overflow: ellipsis;display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2; /** 显示的行数 **/overflow: hidden;  /** 隐藏超出的内容 **/margin: 0 0 15px 0;}.item-money {display: inline-block;float: left;color: orangered;}.item-num {display: inline-block;float: right;span {display: inline-block;width: 25px;border: 1px solid #dcdfe6;text-align: center;&:nth-child(2){width: 50px;}}}}}}.settlement-bottom {position: fixed;bottom: 0;width: 100%;height: 60px;line-height: 60px;padding-left: 30px;padding-right: 25px;box-sizing: border-box;background: #fff;.bottom-left {float: left;display: inline-block;.iconfont {font-size: 20px;&.icon-yuanyixuan {color: orangered;}}p {display: inline-block;}}.bottom-right {display: inline-block;float: right;p {display: inline-block;.total-money {color: orangered;}}.bottom-total {display: inline-block;min-width: 80px;height: 50px;line-height: 50px;margin-top:5px;text-align: center;border-radius: 20px;background: orangered;color: #fff;}}.clear {clear: both;}}
}</style>

• 想写这个小demo好久啦，终于写好。

遇到的vue3.0写法

 import { Watch, Component, Vue, Emit, Prop } from "vue-class-decorator";// 没有组件@component// 有组件// import children from "./components/children.vue";// @component({ components:{children} })export class MyChildren extends Vue{username = ""; // 名字//userId 父子之间传值，必传默认是null@Prop({ type: String, required: true, default: null})userId: string;@Emit("changeChildren")changeChildren(){}created(){}mounted(){}// 方法cancel() {// 调用自定义函数this.changeChildren()}}