vue 写购物车

最新推荐文章于 2023-07-09 21:27:34 发布

@大熊

最新推荐文章于 2023-07-09 21:27:34 发布

阅读量82

点赞数

分类专栏：笔记文章标签： checkbox vue

本文链接：https://blog.csdn.net/qq_51558433/article/details/113754779

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

vue 写购物车

用到了计算属性（computed）、双向绑定（v-model）的复选框单用

<!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>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,i) of cards" :key="i">
        <input type="checkbox" v-model="item.is_checked">
        {{item.pid}} | {{item.pname}} | {{item.price}} | {{item.count}} 小计：￥{{(item.price*item.count).toFixed(2)}}
        <button @click="del" :data-i="i">×</button>
      </li>
      <h1>总计：{{total.toFixed(2)}}</h1>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        cards: [
          { pid: 1, pname: "小米", price: 1000, count: 3, is_checked: false },
          { pid: 1, pname: "苹果", price: 4000, count: 4, is_checked: false },
          { pid: 1, pname: "华为", price: 2000, count: 2, is_checked: false },
        ],
      },
      methods: {
        del(e) {
          var i = parseInt(e.target.dataset.i);
          this.cards.splice(i, 1);
        }
      },
       computed: {
         

       total() {
        /* var total=0;
        for(var c of this.cards){
          if(c.is_checked){
            total+=c.price*c.count
          }
        }
        return total; */

         return this.cards.filter(
            item => item.is_checked
          ).reduce(
            (prev, item) => prev + item.price * item.count, 0
          ) 

        } 
      } 
    })
  </script>
</body>

</html>

@大熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 写购物车

vue 写购物车用到了计算属性（computed）、双向绑定（v-model）的复选框单用<!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"
复制链接

扫一扫