基于Vue组件化开发的购物车小练习
本文共 8201 字，大约阅读时间需要 27 分钟。
实现效果：
根据业务功能进行组件化划分
- 标题组件（展示文本）
- 列表组件（列表展示、商品数量变更、商品删除）
- 结算组件（计算商品总额）
实现代码：
<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <title>Document</title> <style> .container .cart {
width: 300px; margin: auto; } .container .title {
background-color: lightblue; height: 40px; line-height: 40px; text-align: center; font-size: 20px; font-weight: 700; } .container .total {
background-color: #FFCE46; height: 50px; line-height: 50px; text-align: center; } .container .total button {
margin: 0 10px; background-color: #DC4C40; height: 35px; width: 80px; border: 0; } .container .total span {
color: red; font-weight: bold; font-size: 22px; } .container .item {
height: 55px; line-height: 55px; position: relative; border-top: 1px solid #ADD8E6; } .container .item img {
width: 45px; height: 45px; margin: 5px; } .container .item .name {
position: absolute; width: 90px; top: 0; left: 55px; font-size: 16px; } .container .item .change {
width: 100px; position: absolute; top: 0; right: 50px; } .container .item .change a {
font-size: 20px; width: 30px; text-decoration: none; background-color: lightgray; vertical-align: middle; } .container .item .change .num {
width: 40px; height: 25px; } .container .item .del {
position: absolute; top: 0; right: 0px; width: 40px; text-align: center; font-size: 40px; cursor: pointer; color: red; } .container .item .del:hover {
background-color: orange; } </style></head><body> <div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/jacklzx/vue.js"></script> <script type="text/javascript"> var CartTitle = {
props: ['uname'], template: ` <div class="title">{
{uname}}的商品</div> ` } var CartList = {
props: ['list'], template: `<div> <div :key='item.id' v-for='item in list' class="item"> <img :src="item.img" /> <div class="name">{
{item.name}}</div> <div class="change"> <a href="" @click.prevent='sub(item.id)'>－</a> <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'> <a href="" @click.prevent='add(item.id)'>＋</a> </div> <div class="del" @click='del(item.id)'>×</div> </div></div> `, methods: {
changeNum: function(id) {
// console.log(id, event.target.value); this.$emit('change-num', {
id: id, type: 'change', num: event.target.value }); }, sub: function(id) {
this.$emit('change-num', {
id: id, type: 'sub' }); }, add: function(id) {
this.$emit('change-num', {
id: id, type: 'add' }); }, del: function(id) {
// console.log(id); // 把id传递给父组件 this.$emit('cart-del', id); } } } var CartTotal = {
props: ['list'], template: ` <div class="total"> <span>总价：{
{total}}</span> </div> `, computed: {
total: function() {
// 计算商品的总价 var t = 0; this.list.forEach(item => {
t += item.price * item.num; }); return t; } } } Vue.component('my-cart', {
data: function() {
return {
uname: 'Jack', list: [{
id: 1, name: 'TCL彩电', price: 1000, num: 1, img: 'https://s3.ax1x.com/2020/12/02/DIhoGR.jpg' }, {
id: 2, name: '机顶盒', price: 1000, num: 1, img: 'https://s3.ax1x.com/2020/12/02/DIhIi9.jpg' }, {
id: 3, name: '海尔冰箱', price: 1000, num: 1, img: 'https://s3.ax1x.com/2020/12/02/DIh4IJ.jpg' }, {
id: 4, name: '小米手机', price: 1000, num: 1, img: 'https://s3.ax1x.com/2020/12/02/DIhha4.jpg' }, {
id: 5, name: 'PPTV电视', price: 1000, num: 2, img: 'https://s3.ax1x.com/2020/12/02/DIhfZF.jpg' }] } }, template: ` <div class='cart'> <cart-title :uname='uname'></cart-title> <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list> <cart-total :list='list'></cart-total> </div> `, components: {
'cart-title': CartTitle, 'cart-list': CartList, 'cart-total': CartTotal }, methods: {
changeNum: function(val) {
// console.log(val); // 三种情况:输入域变更，加号、减号 if (val.type === 'change') {
// 根据子组件传来的数据，更新list中对应的数据 this.list.some(item => {
if (item.id === val.id) {
item.num = val.num; return true; // 终止遍历 } }); } else if (val.type === 'sub') {
this.list.some(item => {
if (item.id === val.id) {
item.num-- return true; // 终止遍历 } }); } else {
this.list.some(item => {
if (item.id === val.id) {
item.num++ return true; // 终止遍历 } }); } }, delCart: function(id) {
// 根据id删除list中的数据 // 1. 找到id所对应的索引 let index = this.list.findIndex(item => {
return item.id === id; }); // 根据索引删除对应的数据 this.list.splice(index, 1); } } }); var vm = new Vue({
el: '#app', data: {
} }); </script></body></html>转载地址：http://acsu.baihongyu.com/
你可能感兴趣的文章
NYOJ -216 A problem is easy
查看>>
NYOJ 1066 CO-PRIME（数论）
查看>>
NYOJ 737：石子合并（一）（区间dp）
查看>>
nyoj 91 阶乘之和（贪心）
查看>>
nyoj------203三国志
查看>>
NYOJ-525 一道水题
查看>>
NYOJ127星际之门（一）
查看>>
nyoj58 最少步数
查看>>
N皇后问题
查看>>
N皇后问题
查看>>
n种方式教你用python读写excel等数据文件
查看>>
OAuth 2.0 MAC Tokens
查看>>
OAuth 及 移动端鉴权调研
查看>>
OAuth2 + Gateway统一认证一步步实现(公司项目能直接使用)，密码模式&授权码模式
查看>>
OAuth2 Provider 项目常见问题解决方案
查看>>
OAuth2 vs JWT，到底怎么选？
查看>>
Vue.js 学习总结（14）—— Vue3 为什么推荐使用 ref 而不是 reactive
查看>>
oauth2-shiro 添加 redis 实现版本
查看>>
OAuth2.0_JWT令牌-生成令牌和校验令牌_Spring Security OAuth2.0认证授权---springcloud工作笔记148
查看>>
OAuth2.0_JWT令牌介绍_Spring Security OAuth2.0认证授权---springcloud工作笔记147
查看>>