vue简单实现购物车列表功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <link rel="stylesheet" href="style.css" type="text/css">
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app" v-clock>
        <template v-if="list.length">
        <!--代码分为两个部分,一部分是商品信息,另外一部分就是带有千位分隔符的商品总价(每隔三位数加进一个逗号)-->
        <table>
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
              <th>是否选中</th>iutheiorhgewu9ekhryeol;oru
            </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list">
                    <td>{{ index+1 }}</td>
                    <td >{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
                        {{ item.count }}
                        <button @click="handleAdd(index)" >+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价: Y {{ totalPrice }}</div>
          </template>
        <div v-else>购物车为空</div>
    </div>

<!--将vue.min.js和index.js文件写在<body>的最底部,如果写在<head>里,vue实例将无法创建,因为此时dom还没有被解析完成,除非通过异步或在事件domc触发时再创建vue实例-->
</body>
<script>
    let app = new Vue({
        el: '#app',
        // 我们需要的数据比较简单,只有一个列表,里面包含了商品名称,单价,购买数量.在实际业务中,这个列表是通过ajax从服务端动态获取的,我们这里制作示例,直写入data选项内
        data: {
            list:[
                {
                    id: 1,
                    name: 'iphone 7',
                    price: 6188,
                    count: 1
                },

                {id: 2,
                    name: 'iphone 8',
                    price: 6488,
                    count: 1
                },
                {
                    id: 3,
                    name: 'iphone 9',
                    price: 9188,
                    count: 1
                }
            ]
        },
        // 总价totalPrice是依赖于商品列表而动态变化的,所以用计算属性来实现,顺便将结果转化为带有前位分隔符的数字
        computed:{
            totalPrice: function () {
                let total = 0;
                for (let i=0; i<this.list.length; i++){
                    let item = this.list[i];
                    total += item.price * item.count;
                }
                return total.toString().replace(/\B(?=(\d{3})+$)/g ,',');
            }
        },
        methods:{
            handleReduce: function (index){
                if (this.list[index].count ===1) return;
                this.list[index].count--;
            },
            handleAdd: function (index) {
                this.list[index].count++ ;
            },
            handleRemove: function (index) {
                this.list.splice(index, 0)
            }
        }
    });

</script>
<style>
  [v-clock] {
    display: none;
  }
  table {
    border: 1px solid #e9e9e9;
    border-collapse:collapse ;
    border-spacing: 0;
    empty-cells: show;
  }
  th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
  }
  th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
  }
</style>
</html>
vue简单实现购物车列表功能

猜你喜欢
