vue3.x案例 购物车

购物车：

<template>
  <div>
    <table>
        <caption><h1>购物车</h1></caption>
      <tr>
        <th></th>
        <th>编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>

      <tr v-for="item in cartlist" :key="item.id">
        <td><input type="checkbox" v-model="item.checkbox"></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>

      <td>
        <button @click="item.count--" :disabled="item.count>=1">-</button>
        {{item.count}}
        <button @click="item.count++">+</button>
      </td>
     <td><a href="#" @click.prevent="del(index)">删除</a></td>
      </tr>
      <tr>
        <td colspan="3" align="right">总价</td>
        <td colspan="3">{{totalprice.toFixed(2)}}</td>
      </tr>
    </table>
  </div>
</template>
<script>

export default {
  name: 'app',
  data () {
    return {
      cartlist: [
        { id: 1, checkbox: true, name: '《细说PHP》', price: 10, count: 1 },
        { id: 2, checkbox: true, name: '《细说网页制作》', price: 10, count: 1 },
        { id: 3, checkbox: true, name: '《细说JavaScript语》', price: 10, count: 1 },
        { id: 4, checkbox: true, name: '《细说DOM和BOM》', price: 10, count: 1 },
        { id: 5, checkbox: true, name: '《细说Ajax与jQuery》', price: 10, count: 1 },
        { id: 6, checkbox: true, name: '《细说HTML5高级API》', price: 10, count: 1 }
      ]
    }
  },
  computed: {
    totalprice: {
      get () {
        let sum = 0
        for (let book of this.cartlist) {
          if (book.checkbox) {
            sum += book.price * book.count
          }
        }
        return sum
      }
    }
  },
  methods: {
    del (index) {
      this.cartlist.splice(index,1);
    }
  }
}
</script>
<style scoped>
table {
  width:608px;
  border:1px solid #888888;
  border-collapse:collapse;
}

td,th {
  border:1px solid #888888;
  padding: 10px;
}
</style>

效果:

删除的步骤:

 <td><a href="#" @click.prevent="del(index)">删除</a></td>

del (index) {
this.cartlist.splice(index,1);
}
< style scoped>使得组件的样式只在自己当前的组件中有效，而不能在子组件中有效
props的默认形式：props:[‘name1’,‘name2’,‘name3’…];
也可以指定类型：
props:{
msg:{
type:String
},
title{
type:String
},
article{
type:Array
}
},
父组件向子组件传数据：用props
子组件向父组件传数据:用$emit