Vue第三篇：最简单的vue购物车示例-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue第三篇：最简单的vue购物车示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文参考：Vue Cli（脚手架）实现购物车小案例 - - php中文网博客

效果图：

Vue第三篇：最简单的vue购物车示例,前端,vue.js,javascript,前端

编写流程：

1、首先通过@vue/cli创建工程

vue create totalprice

2、改写App.vue代码如下：

<template>
  <div>
    <div v-if="cartlist.length <= 0">你没有选择的商品，购物车为空，去购物</div>
    <table v-else>
      <caption>    <!--表格标题-->
        <h1>购物车</h1>
      </caption>
      <tr>
        <th>选中</th>
        <th>编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in cartlist" :key="item.id">
        <td><input type="checkbox" v-model="item.checkbox"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td><small>￥</small>{{ item.price.toFixed(2) }}</td>
        <td>
          <button @click="item.count--" :disabled="item.count <= 1">-</button>
          {{ item.count }}
          <button @click="item.count++">+</button>
        </td>
        <td><button @click.prevent="del(index)">删除</button></td>
      </tr>
      <tr>
        <td colspan="3" align="center">总价</td>
        <td colspan="3" align="center">{{ totalPrice }}</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
        }
        ]
      }
    },
    methods:{
      del(index){
        this.cartlist.splice(index, 1)
      }
    },
    computed:{
      totalPrice(){
        let sum = 0;
        for(let book of this.cartlist){
          if(book.checkbox){
            sum += book.price * book.count;
          }
        }
        return '￥' + sum.toFixed(2)
      }
    }
  }
</script>

<style scoped>
  table{
    width: 600px;
    border: 1px solid #888888;
    border-collapse: collapse;
  }

  th{
    background-color: #ccc;
  }

  td,th{
    border: 1px solid #888888;
    padding: 10px;
  }

</style>

3、代码中相关内容说明：

（1）<caption>为table的标题

（2）在组件中使用v-for时，必须添加:key属性，否则会报错，为了性能考虑

（3）colspan属性，表示某个td横跨的列数

（4）splice()函数用于从当前数组中移除一部分连续的元素。参数包括start和deleteCount。

（5）border-collapse，折叠样式文章来源地址https://www.toymoban.com/news/detail-583953.html

到了这里，关于Vue第三篇：最简单的vue购物车示例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！