实现一个简单的水果购物车功能

需要用到的指令
v-for遍历数据列表
v-on绑定提交的事件
绑定加减水果数量的事件
v-model双向绑定输入框的数据
除此之外需要用到computed计算属性来自动计算总价

  <div id="app">
    <h1>水果列表</h1>
    <form action="" @submit.prevent="insert">
      <input type="text" v-model="name">
      <input type="text" v-model.number="price">
      <button>添加</button>
    </form>
    <ul>
      <li v-for="item,index in list">
        名称：{{item.name}};
        单价：{{item.price}};
        数量：
        <button @click="decrease(index)">-</button>
        <span>{{item.count}}</span>
        <button @click="increase(index)">+</button>
      </li>
    </ul>
    <h3>总价：{{totalPrice}}</h3>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          name:"",
          price:0,
          list:[]
        }
      },
      computed:{
        totalPrice(){
          let sum = 0
            this.list.forEach(v=>{
              sum+=(v.price * v.count)
            })
          return sum
        }
      },
      methods: {
        insert(){
          this.list.push({
            name:this.name,
            price:this.price,
            count:1
          })
        },
        decrease(i){
          this.list[i].count--
          if(this.list[i].count<=0&& confirm("是否删除")){
            this.list.splice(i,1)
          }
        },
        increase(i){
          this.list[i].count++
        }
      },
    }).mount("#app")

Vue3（5）一个简单的水果购物车功能