初识vue实现购物车小小的案例

chenyou123_

已于 2022-05-26 11:20:28 修改

阅读量141

点赞数

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

于 2022-05-26 09:13:58 首次发布

本文链接：https://blog.csdn.net/chengyou_/article/details/124977730

版权

初识vue实现购物车小小的案例

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

html:

	<div id="app">
        商品名称：<input type="text" v-model="item.name">
        商品价格：<input type="number" v-model="item.price">
        <button @click="add">增加</button>    //  添加商品
        <table class="table table-bordered" style="width: 600px;margin:20px auto;">
            <tr>
                <th>商品名字</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-if="items.length === 0">
                <td colspan="5" class="text-center">
                    暂无商品