vue篇-购物车案例

2022-10-03 14:17:45

在这里插入图片描述

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for='(item,index) in books'::key="item"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price*item.count| getFinalPrice}}</td><td><button @click='reduce(index)':disabled='item.count <= 1'>-</button>{{item.count}}<button @click='add(index)'>+</button></td><td><button @click='removeBtn(index)'>移除</button></td></tr></tbody></table><h2 v-if='books!=""'>总价格:{{theSumOf| getFinalPrice}}</h2><h2 v-else>购物车为空</h2></div></body><script src="../js/vue.min.js"></script><script>var app=newVue({
    el:'#app',
    data:{
      books:[{
          id:1,
          name:'计算机应用',
          date:'2006-9',
          price:85.00,
          count:1},{
          id:2,
          name:'java应用',
          date:'2006-9',
          price:10.00,
          count:1},{
          id:3,
          name:'大数据',
          date:'2006-9',
          price:85.00,
          count:1},{
          id:4,
          name:'ui设计师',
          date:'2006-9',
          price:85.00,
          count:1},],
      addAnd:0},
    methods:{add(index){this.books[index].count++},reduce(index){this.books[index].count--},removeBtn(index){this.books.splice(index,1)}},
    components:{},
    computed:{theSumOf:function(){//累加计算的第一种方法//let sum = 0//this.books.forEach(item => {// sum += parseInt(item.price)*parseInt(item.count)});//return sum//累加计算的第二种方式//let sum = 0//for(let i in this.books){//sum += this.books[i].price*this.books[i]*count}//return sum//累加计算的第三种方式//let sum = 0//for(let item of this.books){//sum += item.price*item.count//}//return sum//累加计算的第四种方法returnthis.books.reduce(function(preValue,book){return preValue+ book.price*book.count},0)}},
    filters:{getFinalPrice(price){return'￥'+ price.toFixed(2)},}});</script><html>
  • 作者：请问大家代码怎么敲
  • 原文链接：https://blog.csdn.net/liumuye88888/article/details/117392643
    更新时间：2022-10-03 14:17:45