JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div id="app">
  <ul>
    <li v-for="item in  shopping" :key="item.id">
      <div class="left">
        <input type="checkbox" v-model="item.state">{{item.name}}
        <span>￥{{item.price}}</span>
      </div>
      <div>
        <button class="btn">
          -
        </button>
        <span>{{item.count}}</span>
        <button class="btn" @click="add  ">
          +
        </button>
      </div>
    </li>
  </ul>
  <div class="df">
    <span class="left">
      <input type="checkbox" id="cb1" v-model="isAllChecked">
      <label for="cb1">全选</label>
    </span>
    <span>合计:{{totalPrice}}</span>
  </div>
</div>

CSS

*{
  margin:0;
  padding:0;
}
#app{
  width:500px;
  margin:10px auto;
}
li{
  list-style:none;
  display:flex;
  height:40px;
  line-height:40px;
  background-color:#ccc;
  border-bottom:1px solid #999;
}
.left{
  flex:1;
}
.df{
  display:flex; 
}
.btn{
  width:20px;
  border-radius:8px;
  cursor:pointer;
}

Vue

const vm = new Vue({
  el: '#app',
  data: {
    shopping: [{
        id: 1,
        name: '桌子',
        image: '',
        price: 100,
        count: 1,
        state: true
      },
      {
        id: 2,
        name: '椅子',
        image: '',
        price: 200,
        count: 1,
        state: false
      },
      {
        id: 3,
        name: '板凳',
        image: '',
        price: 300,
        count: 1,
        state: true
      },
      {
        id: 4,
        name: '沙发',
        image: '',
        price: 400,
        count: 1,
        state: true
      },
    ]
  },
  computed: {
    isAllChecked: {
      get() {
        //获取到想要的值，展示出来
        return this.shopping.every(item => item.state)
      },
      set(newval) {
        console.log(newval);
        if (newval) {
          this.shopping.forEach(item => item.state = true)
        } else {
          this.shopping.forEach(item => item.state = false)
        }
      }
    },
    totalPrice() {
      return this.shopping.filter(item => item.state).reduce((amt, item) => {
        return amt += item.price * item.count
      }, 0)
    }
  },
  methods:{
  add(){
  this.count+=1
  }
  }
})