vue+tp6实现简单购物车

最新推荐文章于 2024-08-21 08:34:07 发布

氢氧化水

最新推荐文章于 2024-08-21 08:34:07 发布

阅读量615

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_59063045/article/details/119219897

版权

本文介绍了使用Vue和ThinkPHP6实现购物车功能的详细步骤，包括数据绑定、数量增减、删除商品、设置选中状态、计算总数量和价格、全选与删除已选商品等关键操作。通过绑定数据和组件化实现功能，无需直接操作DOM。

摘要由CSDN通过智能技术生成

Vue之购物车功能

我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。

我们来看看简单的购物车功能怎么实现：

1.先完成数据绑定

代码：

html:
<div id="test">
    <table id="mytable">
        <tr>
            <th><input type="checkBox"  @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll" />全选</th>
            <th>商品</th>
            <th>数量</th>
            <th>单价(元)</th>
            <th>金额(元)</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in productList">
            <td><input type="checkBox"   v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"/></td>
            <td>{
  {item.name}}</td>
            <td><span>
                <a href="#" @click="item.number>0?item.number--:''">-</a>
                </span><strong>{
  {item.number}}</strong><span>
                <a href="#" @click="item.number++">+</a>
            </span></td>
            <td>{
  {item.price}}</td>
            <td>{
  {item.price*item.number}}</td>
            <td><a href="#" @click="deletePro(index)">删除</a></td>
        </tr>
    </table>
    <div class="checkPro">
        <div class="leftConent">
            <span><a href="#" @click="deleteProduct">删除所选产品</a></span>
        </div>
        <div class="rightConent">
            <span>{
  {getTotal.totalNum}}件商品总计：￥{
  {getTotal.totalPrice}}</span>
        </div>

    </div>
</div>

js:
new Vue({
        el: "#test",
        data: {
            productList: [],
        },
        created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
            this.getAllList();
        },
        methods: {
            getAllList() {
                // 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
                this.$http.get("{:url('admin/shopping/create')}").then(result =>