vue2 实现简易购物车

最新推荐文章于 2024-04-10 11:39:22 发布

敲代码的小吉米

最新推荐文章于 2024-04-10 11:39:22 发布

阅读量561

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/promise466/article/details/128984583

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

watch

默认监听

watch监听默认的是，值类型监听，只会监听数据值的变化，
当引用类型里面的任何一个值发生变化的时候，那么不会触发监听事件

// 侦听器
   watch: {
     // 监听number属性
    // 值类型属性监听
    // number: function (newValue,oldValue){
  /* 
  			形参： newValue
   			是数据改变后的值，
   		    形参:  oldValue
            是数据改变前的值
  */
  // console.log('number数据发生了变化');
 //  console.log(newValue,oldValue);
   //  }
   "obj.number": function (newValue,oldValue){
     console.log(newValue,oldValue);
          }
   }

深度监听 handler

handler 当数据发生变化的时候，触发此函数
// 虽然开启了深度监听，能够监听到对象里面的值得变化
// 但是没有办法知道具体是哪一个值发生了变化

//obj监听对象
obj: {
       handler: function (newValue){
       console.log(newValue);
  // handler 当数据发生变化的时候，触发此函数
  // console.log(123);
  // 虽然开启了深度监听，能够监听到对象里面的值得变化
  // 但是没有办法知道具体是哪一个值发生了变化
        },
  // 开启深度监听 默认为false
     deep: true
    }

computed计算

当需求的处理程度，过于复杂时，计算属性无非是我们更好的选择
计算属性会随着data数据的更新来更新计算属性的值
获取data的数据仍然以this开头

 computed: {
  // total: function 
  // 当计算属性内写getter或者setter时 具体用法是
  /* 
      属性: {
             // getter
               get: function (){
             // 这里是页面最终显示的数据  所有的数据处理在这里执行
           // 执行完成之后 仍然需要返回出去
                 return ‘值’
                        },
           // setter
           set: funciton (value){
     // 在计算属性进行修改的时候，会先触发setter属性，
     // 可以在这里进行数据的筛选等操作
       // set没有返回值
      // value就是操作的时候 赋予的值
                        }
                    }
 */
  total: {
    get: function (){
   var count = 0;
   this.list.forEach(item => {count += item})
                        return count
                    },
        set: function (value){
     for (const key in value) {
    value[key] = Number(value[key])
                        }
                        this.list = value;
                    }
                }

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        input{
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" rules="all">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="ckAll" @click="ckA()">全选</th>
                    <th>id 书名</th>
                    <th>日期</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <!-- item.checked 绑定list数据的checked值 -->
                    <th><input type="checkbox" v-model="item.checked"></th>
                    <th> &nbsp; {{item.id}}-{{item.name}} &nbsp; </th>
                    <th> &nbsp; {{item.time}} &nbsp;</th>
                    <th> &nbsp; {{item.price}} &nbsp; </th>
                    <th> 
                        &nbsp; 
                        <!--数量为1 的时候禁用按钮 -->
                        <button @click="item.num==1?!ckAll:!item.num--" >-</button>
                        <input type="text" v-model="item.num">
                        <button @click="item.num++">+</button> 
                        &nbsp; 
                    </th>
                    <th><button @click="del(item.id)">删除</button></th>
                </tr>
            </tbody>
        </table>
        <h1>总金额：{{total.toFixed(2)}}</h1>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                // 总开关全选 绑定的值
                ckAll:false,
                list:[
                    {
                        id:1,
                        name:"小红书",
                        time:"2023/2/11",
                        price:100,
                        num:2,
                        checked:false
                    },
                    {
                        id:2,
                        name:"小蓝书",
                        time:"2023/2/11",
                        price:100,
                        num:2,
                        checked:false
                    },
                    {
                        id:3,
                        name:"小绿书",
                        time:"2023/2/11",
                        price:100,
                        num:2,
                        checked:false
                    },
                    {
                        id:4,
                        name:"小白书",
                        time:"2023/2/11",
                        price:100,
                        num:2,
                        checked:false
                    },
                    {
                        id:5,
                        name:"小黄书",
                        time:"2023/2/11",
                        price:666,
                        num:2,
                        checked:false
                    }
                ]
            }
        },
        methods: {
            del(id){
                if(confirm("您确定delete我吗?")){
                    // filter 过滤id
                    // item.id!=id 返回新的list数据的条件
                    // 点击的id 不等于数组里的id 就完成了删除
                    this.list=this.list.filter(item=> item.id!=id)
                }
            },
            // 总开关全选控制 下面的每一个商品选项
            ckA() {
                this.list.forEach(item => item.checked = !this.ckAll);
            }
        },
        computed:{
            // 总金额 
            // reduce 累计相加
            total(){
                return this.list.reduce((sum,item)=>{
                    if(item.checked){
                        return sum+=Number(item.price)*Number(item.num)
                    }
                    return sum
                },0)
            }
        },
        watch: {
            // 商品反全选
            list: {
                handler: function () {
                    // every 遍历的每个item 其中一个为false 则返回false
                    this.ckAll = this.list.every((item) => {
                        return item.checked
                    })
                },
                deep: true
            }
        }
    })
</script>
</html>