vue学习--组件化开发(五、购物车页面案例)

效果图：

代码：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .container {
      }
      .container .cart {
        width: 300px;
        /*background-color: lightgreen;*/
        margin: auto;
      }
      .container .title {
        background-color: lightblue;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /*color: #fff;*/
      }
      .container .total {
        background-color: #ffce46;
        height: 50px;
        line-height: 50px;
        text-align: right;
      }
      .container .total button {
        margin: 0 10px;
        background-color: #dc4c40;
        height: 35px;
        width: 80px;
        border: 0;
      }
      .container .total span {
        color: red;
        font-weight: bold;
      }
      .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 src="https://cdn.jsdelivr.net/npm/vue/dist/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: {
          del: function (id) {
            // 把id传递给父组件
            this.$emit('cart-del', id)
          },
          changeNum: function (id, event) {
            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',
            })
          },
        },
      }
      var CartTotal = {
        props: ['list'],
        template: `
                <div class="total">
            <span>总价：{{total}}</span>
            <button>结算</button>
          </div>
                `,
        computed: {
          total: function () {
            // 计算总价
            var t = 0
            this.list.forEach((element) => {
              t += element.price * element.num
            })
            return t
          },
        },
      }
      Vue.component('my-cart', {
        data: function () {
          return {
            uname: '张三',
            list: [
              {
                id: 1,
                name: 'TCL彩电',
                price: 1000,
                num: 1,
                img: 'img/a.jpg',
              },
              {
                id: 2,
                name: '机顶盒',
                price: 1000,
                num: 1,
                img: 'img/b.jpg',
              },
              {
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg',
              },
              {
                id: 4,
                name: '小米手机',
                price: 1000,
                num: 1,
                img: 'img/d.jpg',
              },
              {
                id: 5,
                name: 'PPTV电视',
                price: 1000,
                num: 2,
                img: 'img/e.jpg',
              },
            ],
          }
        },
        template: `
                    <div class='cart'>
                        <cart-title :uname='uname'></cart-title>
                        <cart-list :list='list' @cart-del='delCart($event)' @change-num='changeNum($event)'></cart-list>
                        <cart-total :list='list'></cart-total>
                    </div>
                `,
        components: {
          'cart-title': CartTitle,
          'cart-list': CartList,
          'cart-total': CartTotal,
        },
        methods: {
          delCart: function (id) {
            // 根据id删除list中数据
            // 1.找到id对应所引
            var index = this.list.findIndex((item) => {
              return (item.id = id)
            })
            // 2.根据索引删除对应数据
            this.list.splice(index, 1)
          },
          changeNum: function (value) {
            // 根据子组件传过来的数据，更新list数据
            this.list.some((item) => {
              if (item.id == value.id) {
                if (value.type == 'add') {
                  item.num += 1
                } else if (value.type == 'sub') {
                  if (item.num > 1) {
                    item.num -= 1
                  }
                } else {
                  if (value.num <= 1) {
                    item.num = 1
                  } else {
                    item.num = value.num
                  }
                }
                return true
              }
            })
          },
        },
      })
      var vm = new Vue({
        el: '#app',
        data: {},
      })
    </script>
  </body>
</html>

posted @ 2020-04-12 22:11 一纸年华阅读(17) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习--模板语法(五、选项卡案例)

· vue学习--组件化开发(四、组件插槽)

· Vue-购物车案例

· vue 购物车案例

· 17_购物车案例

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--组件化开发(五、购物车页面案例)

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
	.container {
	}
	.container .cart {
	width: 300px;
	/background-color: lightgreen;/
	margin: auto;
	}
	.container .title {
	background-color: lightblue;
	height: 40px;
	line-height: 40px;
	text-align: center;
	/color: #fff;/
	}
	.container .total {
	background-color: #ffce46;
	height: 50px;
	line-height: 50px;
	text-align: right;
	}
	.container .total button {
	margin: 0 10px;
	background-color: #dc4c40;
	height: 35px;
	width: 80px;
	border: 0;
	}
	.container .total span {
	color: red;
	font-weight: bold;
	}
	.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 src="https://cdn.jsdelivr.net/npm/vue/dist/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: {
	del: function (id) {
	// 把id传递给父组件
	this.$emit('cart-del', id)
	},
	changeNum: function (id, event) {
	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',
	})
	},
	},
	}
	var CartTotal = {
	props: ['list'],
	template: `
	<div class="total">
	<span>总价：{{total}}</span>
	<button>结算</button>
	</div>
	`,
	computed: {
	total: function () {
	// 计算总价
	var t = 0
	this.list.forEach((element) => {
	t += element.price * element.num
	})
	return t
	},
	},
	}
	Vue.component('my-cart', {
	data: function () {
	return {
	uname: '张三',
	list: [
	{
	id: 1,
	name: 'TCL彩电',
	price: 1000,
	num: 1,
	img: 'img/a.jpg',
	},
	{
	id: 2,
	name: '机顶盒',
	price: 1000,
	num: 1,
	img: 'img/b.jpg',
	},
	{
	id: 3,
	name: '海尔冰箱',
	price: 1000,
	num: 1,
	img: 'img/c.jpg',
	},
	{
	id: 4,
	name: '小米手机',
	price: 1000,
	num: 1,
	img: 'img/d.jpg',
	},
	{
	id: 5,
	name: 'PPTV电视',
	price: 1000,
	num: 2,
	img: 'img/e.jpg',
	},
	],
	}
	},
	template: `
	<div class='cart'>
	<cart-title :uname='uname'></cart-title>
	<cart-list :list='list' @cart-del='delCart($event)' @change-num='changeNum($event)'></cart-list>
	<cart-total :list='list'></cart-total>
	</div>
	`,
	components: {
	'cart-title': CartTitle,
	'cart-list': CartList,
	'cart-total': CartTotal,
	},
	methods: {
	delCart: function (id) {
	// 根据id删除list中数据
	// 1.找到id对应所引
	var index = this.list.findIndex((item) => {
	return (item.id = id)
	})
	// 2.根据索引删除对应数据
	this.list.splice(index, 1)
	},
	changeNum: function (value) {
	// 根据子组件传过来的数据，更新list数据
	this.list.some((item) => {
	if (item.id == value.id) {
	if (value.type == 'add') {
	item.num += 1
	} else if (value.type == 'sub') {
	if (item.num > 1) {
	item.num -= 1
	}
	} else {
	if (value.num <= 1) {
	item.num = 1
	} else {
	item.num = value.num
	}
	}
	return true
	}
	})
	},
	},
	})
	var vm = new Vue({
	el: '#app',
	data: {},
	})
	</script>
	</body>
	</html>