vue小案例购物车计算本

最新推荐文章于 2022-03-15 15:35:42 发布

致我逝去的青春

最新推荐文章于 2022-03-15 15:35:42 发布

阅读量248

点赞数 1

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

本文链接：https://blog.csdn.net/wang_js_amateyr/article/details/104675623

版权

vue专栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

购物车

数据

[
  {
    "isSelected": false,
    "productName": "深入浅出xx",
    "productInfo": "颜色：xx学习",
    "productPrice": 57.8,
    "productCount": 3
  },
  {
    "isSelected": true,
    "productName": "深入浅出xx",
    "productInfo": "颜色：xx学习",
    "productPrice": 57.8,
    "productCount": 3
  }
]

在这里插入代码<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <table class="table table-bordered">
                    <caption class="text-center h2 text-danger">购物车</caption>
                    <tr>
                        <td>全选<input type="checkbox" v-model="checkAll" @change="changeAll"></td>
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="item in products">
                        <td><input type="checkbox" v-model="item.isSelected" @change="checkone"></td>
                        <td>
                            <img :src="item.productCover" alt="">
                        </td>
                        <td>{{item.productPrice}}</td>
                        <td>
                            <input type="number" v-model="item.productCount" min="0">
                        </td>
                        <td>{{item.productPrice*item.productCount| toFixed(2)}}</td>
                        <td>
                            <button class="btn btn-danger text-center" @click="remove(item)">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">总计：{{sum()|toFixed(2)}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
    <script>

        // 数据驱动视图
        let vm= new Vue({
            el:"#app",
            data:{
                products:[],
                checkAll:false
            },
            created(){
                this.getData()
            },
            filters:{
                toFixed(num,val){
                    // num : 是管道符前面的值;返回值是页面显示的值
                    return  num.toFixed(val)
                }
            },
            methods:{
                getData(){
                    // 通过axios请求数据，把请求回来的数据赋值给当前实例的products属性；
                    axios.get("./carts.json").then(data=>{
                        // data.data才是我们想要的数据
                        this.products=data.data;
                        // 对默认数据进行一次检测
                        this.checkone();
                    })
                },
                checkone(){
                    // 当input的value发生改变以后，会触发这个方法；执行这个方法，检测所有的value值是否是选中状态；
                    // 遍历products;找false;
                    // 点击input，更改了
                    this.checkAll=this.products.every(item=>{
                        return item.isSelected;
                    });
                },
                changeAll(){
                    this.products.forEach(item => {
                        // item : products中的每一项
                        // 让products中的每一项中的isSelected的属性值跟随这个全选框的变化；
                        item.isSelected=this.checkAll;
                    });
                },
                remove(cur){
                    // 删除products中的对应那一项
                    this.products=this.products.filter(item=>item!==cur);
                },
                sum(){
                    return this.products.reduce((prev,next)=>{
                        if(next.isSelected){
                            // 如果是true,则参与求和计算
                            return prev+next.productPrice*next.productCount
                        }else{
                            // 如果不是true，需要把上一次的求和传给下一次的求和；
                            return prev;
                        }
                    },0)
                }
            }
        })
    </script>片

记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
        .del{
            text-decoration: line-through;
            color:#ccc;
        }
    </style>
</head>
<body>
    <div id="app">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        TodoList
                    </a>
                    </div>
                </div>
            </nav>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background: pink;">
                                <h2 class="text-danger">亲~^_^,您有{{count}}件事已完成</h2>
                                <input type="text" class="form-control" @keyup.enter="addTodo" v-model="val">
                            </div>
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li class="list-group-item" v-for="item in todo" @dblclick="remember(item)">
                                        <span v-show="cur!==item">
                                            <input type="checkbox" v-model="item.isSelected">
                                            <span :class="{del:item.isSelected}">{{item.title}}</span>
                                        </span>
                                        <input type="text" v-show="cur===item" v-model="item.title" @blur="update" v-focus>
                                        <button class="btn btn-xs pull-right btn-danger" @click="removeTodo(item)">&bigotimes;</button>
                                    </li>
                                </ul>
                            </div>
                            <div class="panel-footer">
                                <ul class="nav nav-pills">
                                    <li role="presentation" :class="{active:hash==='#all'}"><a href="#all">全部任务</a></li>
                                    <li role="presentation" :class="{active:hash==='#finish'}"><a href="#finish">已完成</a></li>
                                    <li role="presentation" :class="{active:hash==='#unfinish'}"><a href="#unfinish">未完成</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="1.todo.js"></script>
</body>
</html>
// vue : 数据驱动视图
let vm = new Vue({
    el:"#app",
    data:{
        // 属性都会放在vm的实例上
        task:[{isSelected:false,title:"去爬山"},{isSelected:false,title:"跑步"}],
        val:"",
        cur:"",
        hash:"#all"
    },
    created(){
        // 监听页面的hash值，当页面hash值发生变化以后，更改data中的hash属性
        ///window.location.href
        console.log(window.location);
        window.addEventListener("hashchange",()=>{
            this.hash=window.location.hash;
        });
    },
    directives:{
        focus(el){// 自动获取鼠标焦点
            el.focus();
        }
    },
    computed:{
        todo(){// 根据hash值的改变而发生改变；会依赖hash值的变化；
            if(this.hash==="#all"){
                return this.task;
            }else if(this.hash==="#finish"){
                return this.task.filter(item=>item.isSelected);
            }else if(this.hash==="#unfinish"){
                return this.task.filter(item=>!item.isSelected);
            }
        },
        count(){// 如果写函数，默认是执行get方法//过滤出task中对象的属性名isSelected是true的个数
            return this.task.filter(item=>item.isSelected).length;
        }
    },
    methods:{
        addTodo(){// 新增todo
            // this==>vm
            //console.log(this.val);
            this.task.push({isSelected:false,title:this.val});
            this.val="";
        },
        removeTodo(obj){
            // 过滤出去空间地址一模一样的那个对象
            this.task=this.task.filter(item=>item!==obj)
        },
        remember(obj){
            this.cur=obj;
        },
        update(){
            this.cur="";
        }
    }
})

致我逝去的青春

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue小案例购物车计算本

购物车数据[ { "isSelected": false, "productName": "深入浅出xx", "productInfo": "颜色：xx学习", "productPrice": 57.8, "productCount": 3 }, { "isSelected": true, "productName": "深入...
复制链接

扫一扫