BigInteger类与BigDecimal类(Java)

centos操作系统官方网站下载

  返回  

Vue练手demo —— 购物车

2021/8/21 18:04:26 浏览:

请添加图片描述
细节未展现,需要自提

购物车实现

  • 1. 实现功能
  • 2. 步骤
    • 2.1 搭建框架和完成交互
      • 2.1.1 框架
      • 2.1.2 交互代码块
    • 2.2 完成样式
  • 3. 遇到的难点
    • 3.1 全选与全不选
    • 3.2 批量删除
  • 4. 代码

1. 实现功能

   虽然这个项目花费时间不多,但是涉及的知识点还是很多的。首先,当我们要做一个项目的时候,需要深入了解项目,这里仅从其实现功能分析。为了偷懒,这里小编就把只用1个文件实现,不推荐哟~
  1. 删除功能(单个删除与批量删除)
  2. 添加功能(未实现)
  3. 计算总价
    最终效果
    购物车界面

2. 步骤

写这个步骤纯粹是为了让自己更熟练,仅供参考~

2.1 搭建框架和完成交互

其实这一步就是写html和javascript、vue类的(标题好听一些~~)
习惯用table写这类demo,还有其他合适的方法,可以分享在评论区哟~或者私聊,共同进步 。。

2.1.1 框架

话不多说,直接上代码

 <div id="app">
  <div id="cart" v-if="isShow">
    <table >
        <tr>
            <th><input type="checkbox" @click="getAll" v-model:checked="alldone"> </th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="item.name" v-if="!item.doDel">
           <td><input type="checkbox" @click="item.isdone=!item.isdone" v-model:checked="item.isdone"></td>
            <td>{{item.name}}</td>
            <td>{{toNum(item.price)}}</td>
            <td>
                <button @click="Decrement(item,index)">-</button>
                {{item.count}}
                <button @click="Increment(item)">+</button>
            </td>
            <td>
                <button @click="deleteItem(index)">删除</button>
            </td>
        </tr>

    </table>
    <div id="MyFooter">
         <div>共计¥{{toNum(totalPrice)}}</div>
         <div><button @click="pDelete">批量删除</button></div>
     </div>
   </div>

   <div v-else id="other">
       <h2>购物车空空如也~</h2>
   </div>
  </div>

2.1.2 交互代码块

<script type="text/javascript">
   const app = new Vue({
        el:'#app',
        data:{
            list:[
                {
                     name:'鲁路修',
                    price:12.00,
                    count:1,
                    isdone:false,
                    doDel:false
                 },
                {
                    name:'深海',
                    price:11.00,
                    count:1,
                    isdone:false,
                    doDel:false
                },
                {
                    name:'西瓜书',
                    price:13.00,
                    count:1,
                    isdone: false,
                    doDel:false
                },
                {
                    name:'99',
                    price:15.00,
                    count:1,
                    isdone:false,
                    doDel:false
                },

            ],
        alldone:false,
            isShow:true
        },
        computed:{
            totalPrice(){
                account=0
                for(item of this.list){
                    // alert(item.price)
                    if(item.isdone) {
                        account += item.price * item.count
                    }
                }
                return account

            }
        },
        methods:{
	        Decrement(item,index){
	             if(item.count == 0){
	
	                 this.deleteItem(index)
	                 return
	             }
	             item.count--
	
	         },
	         Increment(item){
	             item.count++
	         },
	         getAll(){
	             this.alldone = !this.alldone
	             if(this.alldone){
	                 for(item of this.list){
	                     item.isdone = true
	                 }
	             }
	             else {
	                 for(item of this.list){
	                     item.isdone = false
	                 }
	             }
	         },
	        deleteItem(index){
	            this.list.splice(index,1)
	        },
	        pDelete(){
	                   j=0
	                    for(let i=0;i<this.list.length;i++){
	                        if(this.list[i].isdone){ //被选中
	                            this.list[i].doDel = true //表示要被删除了
	                            this.list[i].isdone =false  // 记得去掉选中
	                            j++
	                        }
	                    }
	               if(j == this.list.length){
	                   // 表示没有东西在购物车里了~
	                   this.isShow = false
	               }
	
	           },
	      	toNum(val){
	                return val.toFixed(2) //保留两位小数
	      }

        },
   watch:{
            list:{
                handler(val,oldVal){
                    // console.log(val)
                    if(val.length == 0 ){
                        // 表示没有东西在购物车里了~
                        this.isShow = false
                    }
                    j = 0
                    for(i of val){
                        if(i.isdone){
                            j++
                        }
                    }
                    if(j == val.length){
                        this.alldone=true
                    }else{
                        this.alldone=false
                    }
                },
                deep:true  //深度监听 可以监听到对象、数组的变化
            }

   }

    })

    </script>

2.2 完成样式

 body{
            margin: 0;
            padding: 0;
        }
        button {
            background-color: #676767; /* Green */
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
        }
        #cart,#other{
            width: 700px;
            margin: 20px auto;
        }
        table
        {
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
            width:100%;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
        #MyFooter{
            position: relative;
            width: 100%;
            top: 5px;
        }
        #MyFooter div button{
            position: absolute;
            top: 0;
            right:0;
        }

    </style>

3. 遇到的难点

3.1 全选与全不选

记得看视频的时候看到过,真正自己练习的时候,就感觉到有点吃力,固然还是得多练习,而且实现的时候代码量一点也不少。。最后用到了方法和深度监听。。。

3.2 批量删除

这个问题,困扰了我一会,就是本人知识范围里删除要一个一个删,我还瞎想着有没有可能同步异步能解决问题,半小时没解决。。我就采用了v-if来实现,也是耍了点小聪明,如果有大佬知道如何更好地批量删除,希望能私发给小编呀~

4. 代码

小白一个,代码还有许多不足,还请多多指教哇~
最后这个webstorm的格式,我没找到在哪调,所以只能这样了,知道的小伙伴可以告诉我哇~,感谢收看

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        button {
            background-color: #676767; /* Green */
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
        }
        #cart,#other{
            width: 700px;
            margin: 20px auto;
        }
        table
        {
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
            width:100%;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
        #MyFooter{
            position: relative;
            width: 100%;
            top: 5px;
        }
        #MyFooter div button{
            position: absolute;
            top: 0;
            right:0;
        }

    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
      <div id="cart" v-if="isShow">
    <table >
        <tr>
            <th><input type="checkbox" @click="getAll" v-model:checked="alldone"> </th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="item.name" v-if="!item.doDel">
           <td><input type="checkbox" @click="item.isdone=!item.isdone" v-model:checked="item.isdone"></td>
            <td>{{item.name}}</td>
            <td>{{toNum(item.price)}}</td>
            <td>
                <button @click="Decrement(item,index)">-</button>
                {{item.count}}
                <button @click="Increment(item)">+</button>
            </td>
            <td>
                <button @click="deleteItem(index)">删除</button>
            </td>
        </tr>

    </table>
          <div id="MyFooter">
              <div>共计¥{{toNum(totalPrice)}}</div>
              <div><button @click="pDelete">批量删除</button></div>
          </div>
      </div>

      <div v-else id="other">
          <h2>购物车空空如也~</h2>
      </div>
  </div>
    <script type="text/javascript">
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {
                         name:'鲁路修',
                        price:12.00,
                        count:1,
                        isdone:false,
                        doDel:false
                     },
                    {
                        name:'深海',
                        price:11.00,
                        count:1,
                        isdone:false,
                        doDel:false
                    },
                    {
                        name:'西瓜书',
                        price:13.00,
                        count:1,
                        isdone: false,
                        doDel:false
                    },
                    {
                        name:'99',
                        price:15.00,
                        count:1,
                        isdone:false,
                        doDel:false
                    },

                ],
            alldone:false,
                isShow:true
            },
            computed:{
                totalPrice(){
                    account=0
                    for(item of this.list){
                        // alert(item.price)
                        if(item.isdone) {
                            account += item.price * item.count
                        }
                    }
                    return account

                }
            },
            methods:{
                Decrement(item,index){
                    if(item.count == 0){

                        this.deleteItem(index)
                        return
                    }
                    item.count--

                },
                Increment(item){
                    item.count++
                },
                getAll(){
                    this.alldone = !this.alldone
                    if(this.alldone){
                        for(item of this.list){
                            item.isdone = true
                        }
                    }
                    else {
                        for(item of this.list){
                            item.isdone = false
                        }
                    }
                },
            deleteItem(index){
                this.list.splice(index,1)
            },
               pDelete(){
                       j=0
                        for(let i=0;i<this.list.length;i++){
                            if(this.list[i].isdone){ //被选中
                                this.list[i].doDel = true //表示要被删除了
                                this.list[i].isdone =false  // 记得去掉选中
                                j++
                            }
                        }
                   if(j == this.list.length){
                       // 表示没有东西在购物车里了~
                       this.isShow = false
                   }

               },
          toNum(val){
                    return val.toFixed(2) //保留两位小数
          }

            },
       watch:{
                list:{
                    handler(val,oldVal){
                        // console.log(val)
                        if(val.length == 0 ){
                            // 表示没有东西在购物车里了~
                            this.isShow = false
                        }
                        j = 0
                        for(i of val){
                            if(i.isdone){
                                j++
                            }
                        }
                        if(j == val.length){
                            this.alldone=true
                        }else{
                            this.alldone=false
                        }
                    },
                    deep:true  //深度监听 可以监听到对象、数组的变化
                }

       }

        })

    </script>
</body>
</html>

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号