其他分享
首页 > 其他分享> > vue 购物车 todolist

vue 购物车 todolist

作者:互联网

购物车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .main {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="main">
        <table class="table">
            <tr>
                <td>
                    <input type="checkbox" v-model="allchecked" @change="checkall()">全选
                </td>
                <td>编号</td>
                <td>名字</td>
                <td>价格</td>
                <td>数量</td>
                <td>金额</td>
                <td>操作</td>
            </tr>
            <tr v-for="(goods,index) in goodslist">
                <td>
                    <input type="checkbox" v-model="goods.checked" @change="backCheck()">
                </td>
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.price}}</td>
                <td>
                    <input type="button" value=" - " class="btn btn-info" @click="reduce(index)">
                    {{goods.count}}
                    <input type="button" value=" + " class="btn btn-info" @click="add(index)">
                </td>
                <td>{{goods.count*goods.price}}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="deleteGoods(index)">
                </td>
            </tr>
        </table>
        <hr>
        <p>总金额:{{totalMoney()}}</p>
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: ".main",
        data: {
            allchecked: false, //全选的
            goodslist: [
                { checked: false, "id": "01001", "name": "铅笔", "price": 1.5, "count": 5 },
                { checked: false, "id": "01002", "name": "钢笔", "price": 35, "count": 2 },
                { checked: false, "id": "01003", "name": "毛笔", "price": 25, "count": 1 },
                { checked: false, "id": "01004", "name": "签字笔", "price": 5, "count": 2 }
            ]
        },
        methods: {
            checkall() {
                this.goodslist.forEach(goods => {
                    goods.checked = this.allchecked
                });
            },
            backCheck() {
                let isAllCheck = true;
                for (let i = 0; i < this.goodslist.length; i++) {
                    if (this.goodslist[i].checked === false) {
                        isAllCheck = false;
                        break;
                    }
                }
                this.allchecked = isAllCheck;
                // 最简单的写法???
                // this.allchecked = !this.goodslist.some(item => item.checked == false);
            },
            add(num) {
                this.goodslist[num].count++;
            },
            reduce(num) {
                if (this.goodslist[num].count <= 0) {
                    return
                }
                this.goodslist[num].count--;
            },
            totalMoney() {
                let money = 0;
                this.goodslist.forEach(goods => {
                    if (goods.checked === true) {
                        money += goods.count * goods.price
                    }
                })
                return money;
            },
            deleteGoods(num) {
                if (confirm("亲,您真的真的,真的要删除吗?")) {
                    this.goodslist.splice(num, 1)
                }
            }
        },
    })
</script>

todolist

<!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>
    <style>
        ul {
            list-style: none;
        }

        /* 已完成状态的样式 */
        .completecls {
            color: grey;
            background-color: aliceblue;
            text-decoration: line-through;
        }

        /* 处于非编辑状态的样式 */
        .noEdit {
            outline: none;
            border: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>任务列表</h1>
        <p>任务总数:{{tasks.length}},还有{{totalNoComplete()}}未完成, <input type="button" value="删除" @click="del()">已完成任务</p>
        <ul>
            <li v-for="task in tasks">
                <input type="checkbox" v-model="task.isComplete">
                <input type="text" v-bind:class="{noEdit:!task.isEdit ,completecls:task.isComplete}" v-model="task.text"
                    :disabled="task.isComplete" @focus="task.isEdit=true" @blur="task.isEdit=false" />
            </li>
        </ul>
        <input type="text" placeholder="请输入任务名" v-model="newTask">
        <input type="button" value="添加" @click="addTask()">
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>

    // todoList需求:
    // 1、显示所有的todolist (已ok)
    // 2、添加任务 (已ok)
    // 3、修改任务内容 (已ok)
    // 4、修改任务的状态:让任务的状态变成已完成  (已ok)
    // 5、删除已完成的任务 (已ok)
    // 6、统计任务数量(总数,未完成任务数量)(已ok)
    // 7、本地存储。

    let vm = new Vue({
        el: "#app",
        data: {
            newTask: "",
            tasks: [
                {
                    text: "写html",
                    isComplete: false,
                    isEdit: false //当前任务是否处于编辑状态
                },
                {
                    text: "写css",
                    isComplete: false,
                    isEdit: false //当前任务是否处于编辑状态
                },
                {
                    text: "写js",
                    isComplete: false,
                    isEdit: false //当前任务是否处于编辑状态
                },
                {
                    text: "写vue",
                    isComplete: false,
                    isEdit: false //当前任务是否处于编辑状态
                }
            ]
        },
        methods: {
            addTask() {
                this.tasks.push({
                    text: this.newTask,
                    isComplete: false,
                    isEdit: false,
                })
                this.newTask = ""
            },
            del() {
                if (confirm("真删除吗?")) {
                    this.tasks = this.tasks.filter(item => item.isComplete === false)
                }

            },
            totalNoComplete() {
                let count = 0;
                this.tasks.forEach(item => {
                    if (item.isComplete === false) {
                        count++
                    }
                });
                return count;
            }

        }
    });

</script>

标签:count,vue,false,todolist,购物车,goodslist,goods,checked,isComplete
来源: https://blog.csdn.net/qq_44417271/article/details/113622256