前端-vue基础71-购物车5商品数量的变更-阿里云开发者社区

前端-vue基础71-购物车5商品数量的变更

2022-08-10 104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端-vue基础71-购物车5商品数量的变更

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <div id="app">
         <div class="container">
             <my-cart></my-cart>
         </div>
     </div>
     <script type="text/javascript" src="./js/vue.js"></script>
     <script>
         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'>
                        <div class='name'>{{item.name}}</div>
                        <div class='change'>
                        <a href="">-</a>
                        <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'>
                        <a href="">+</a>
                        </div>
                         <div class="del" @click='del(item.id)'>X</div>
                 </div>
             </div>
             `,
             methods: {
                 changeNum: function(id, event) {
                     console.log(1);
                     console.log(id, event.target.value);
                     this.$emit('change-num', {
                         id: id,
                         num: event.target.value
                     })
                 },
                 del: function(id) {
                     console.log(id);
                     //把id传给父亲组件
                     this.$emit('cart-del', id);
                 }
             }
         }
         var CartTotal = {
             props: ['list'],
             template: `
             <div class="total">
                     <span>总价{{total}}</span>
                     <button>结算</button>
                 </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: '张三',
                     list: [{
                         id: 1,
                         name: 'TCL彩电',
                         price: 1000,
                         num: 1,
                     }, {
                         id: 2,
                         name: 'TCL彩电',
                         price: 1000,
                         num: 1,
                     }, {
                         id: 3,
                         name: 'TCL彩电',
                         price: 1000,
                         num: 1,
                     }, {
                         id: 4,
                         name: 'TCL彩电',
                         price: 1000,
                         num: 1,
                     }, {
                         id: 5,
                         name: 'TCL彩电',
                         price: 1000,
                         num: 1,
                     }, ]
                 }
             },
             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);
                     //根据子组件传递数据更新list对应数据
                     this.list.some(item => {
                         if (item.id == val.id) {
                             item.num = val.num;
                             //终止
                             return true;
                         }
                     });
                 },
                 delCart: function(id) {
                     //根据id删除list数据
                     //找到id对应索引
                     var index = this.list.findIndex(item => {
                         return item.id == id;
                     });
                     //根据索引删除数据
                     this.list.splice(index, 1);
                 }
             }
         })
         var vm = new Vue({
             el: '#app',
             data: {
             }
         })
     </script>
 </body>
 </html>运算结果

前端-vue基础71-购物车5商品数量的变更

热门文章

最新文章

相关课程

相关电子书

相关实验场景