vue购物车完整功能
qlj224 人气:0vue实现购物车商品单选、全选及商品数量和总价计算,供大家参考,具体内容如下
效果展示
HTML
<template> <div class="buyCar"> <header-bar title="购物车商品" :show-line="true" /> <div class="content"> <table> <thead> <tr> <th>商品总数: {{ total }}</th> <th>商品总价: {{ totalPrice }}</th> <th> <input v-model="AllChecked" type="checkbox" @click="checkAll" > 全选 </th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index" > <td>{{ item.name }}</td> <td>单价: {{ item.price }}</td> <td> <input v-model="item.isChecked" type="checkbox" @click="check(item)" > </td> </tr> </tbody> </table> </div> </div> </template>
JS
<script> import HeaderBar from '../components/header/index.vue'; export default { name: 'BuyCar', components: { HeaderBar, }, data() { return { list: [ { name: '商品1', price: 1111, isChecked: false, }, { name: '商品2', price: 2222, isChecked: false, }, { name: '商品3', price: 3333, isChecked: false, }, { name: '商品4', price: 4444, isChecked: false, }, { name: '商品5', price: 5555, isChecked: false, }, ], total: 0, // 是否已全选 AllChecked: false, }; }, computed: { totalPrice() { let prices = 0; this.list.forEach(item => { if (item.isChecked) { prices += item.price; } }); return prices; }, }, methods: { // 单选 check(item) { if (!item.isChecked) { this.total++; } else { this.total--; } this.AllChecked = this.total === this.list.length; }, // 全选和反选 checkAll() { const AllChecked = this.AllChecked; this.list.forEach(item => { item.isChecked = !AllChecked; }); this.AllChecked = !this.AllChecked; this.total = this.AllChecked ? this.list.length : 0; }, }, }; </script>
CSS
<style lang="less" scoped> .buyCar { height: 100%; display: flex; flex-direction: column; .content { height: calc(100vh); padding: 45px 15px 15px; table { text-align: center; border-collapse: collapse; border-spacing: 0; } td, th { width: 200px; height: 20px; border: 1px solid #000; } input { width: 20px; height: 20px; } } } </style>
加载全部内容