Vue 案例(简易购物车)

最新推荐文章于 2022-02-10 17:25:42 发布

宇柯

最新推荐文章于 2022-02-10 17:25:42 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/qq_60078280/article/details/119789231

版权

今天给大家看一个简单的Vue小案例

文件目录:

css
- bootstrap.min.css
js
- jquery-3.5.1.min.js
- vue-2.6.12-min.js
- bootstrap.min.js
data
- list.json

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/vue-2.6.12-min.js"></script>
</head>
<body>
    <div id="app">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for = "(item,index) in list" :key = "item.name">
                    <td v-text = "item.name"></td>
                    <td><span class="">￥</span><span v-text ="item.price"></span></td>
                    <td >
                        <div class="row">
                            <div class="input-group col-md-2">
                            <all @vc = cum(index)></all>
                            <input type="text" class="form-control text-center" v-model:value="item.num">
                            <all-list @bc = "sum(index)"></all-list>
                        </div>
                        </div>
                        
                    </td>
                    <td v-text = "item.price*item.num"></td>
                    <td><del-lict @delopp = delClo(index)></del-lict></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.component('all',{
            template:'<span class="input-group-addon" @click = "jia">+</span>',
            data(){
                return{
                    cum:1
                }
            },
            methods:{
                jia(){
                    this.cum++
                    this.$emit('vc',this.vc)
                }
            }
        }),
        Vue.component('all-list',{
            template:'<span class="input-group-addon" @click = "jian">-</span>',
            data(){
                return{
                    
                }
            },
            methods:{
                jian(){
                    this.sum++
                    this.$emit('bc',this.bc)
                }
            }
        }),
        Vue.component('delLict',{
            template:'<button class="btn btn-danger" @click = "del()">删除</button>',
            methods:{
                del(e){
                    this.$emit('delopp',this.delopp)
                }
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                list:[]
            },
            methods:{
                cum(e){
                    this.list[e].ipone++
                },
                sum(e){
                    this.list[e].ipone--
                },
                delClo(e){
                    this.list.splice(e,1)
                }
            },
            mounted() {
                fetch('./data/list.json')
                .then(res => res.json())
                .then(ses => {
                    if (ses.status === 200) {
                        this.list = ses.data
                    }
                })
            }
        })
    </script>
</body>
</html>

效果图:

功能阐述:

1.统计数量

2.单个商品价格总计

3. 删除单个商品

宇柯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 案例(简易购物车)

今天给大家看一个简单的Vue小案例文件目录:css bootstrap.min.css js jquery-3.5.1.min.js vue-2.6.12-min.js bootstrap.min.js data list.json 代码:<!DOCTYPE html><html lang="zh-CN"><head> ...
复制链接

扫一扫