vue 购物车

Question

 items: [{
                    title: "苹果",
                    price: 10,
                    count: 2,
                }, {
                    title: "芒果",
                    price: 10,
                    count: 2,
                }, {
                    title: "葡萄",
                    price: 10,
                    count: 2,
                }, ],

上面是后台数据 默认数量 后台count传入 用户可以点击加减 也可以 自定义输入数量 如何 双向绑定

Answer 1

加减使用@click绑定自定义事件，
中间input使用v-model双向绑定变量就可以了。
一段伪代码例子：

<template lang='pug>
  ul
    li(v-for='(item,index) in cartsList' :key='index')
      label {{ item.title }}
      span
        a(@click='add(index)') +
        input(v-model='cardList[index].count')
        a(@click='sub(index)') -
      span $ {{item.price}}
      span $ {{item.price*item.count}}
  p {{ total.count }}件商品， $ {{total.price}}
</tempalte>
<script>
export default {
  data(){
    return{
        cartsList:[],
    }
  },
  computed:{
    total(){
      let count = 0
      let price = 0
      this.cartsList.foreach(item=>{
        count+=item.count
        price+=item.count*item.price
      })
      return { count:count,price:price }
    }
  },
  methods:{
    add(index){
      this.cartsList[index].count +=1
    },
    sub(index){
      this.cartsList[index].count += -1
    }
    
  }
}
</script>

Answer 2

• 善于用computed计算属性，很好解决
• 需要注意点就是浮点数运行精度问题，可以通过下面方面修正计算结果。

function strip(num, precision = 15){
    return +parseFloat(Number(num).toPrecision(precision));
}
// 9*1.55 = 13.950000000000001
strip(13.950000000000001) //13.95