类似愿望清单

我也不知道为什么但是它可以运行

已于 2022-11-27 14:12:22 修改

阅读量161

点赞数 1

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

于 2021-06-15 20:11:16 首次发布

看看就行多练练就会了加油哦

本文链接：https://blog.csdn.net/weixin_44437201/article/details/117932220

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

加油加油加油

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心愿清单</title>
<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background: #f0f0f0;
    font-size: 18px;
}
input {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #666;
    font-size: 18px;
}
.wish {
    padding: 30px;
}
ul {
    margin: 20px 0;
    list-style: none;
}
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}
.wish-btn {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 50px;
    background: #ccc;
    text-align: center;
}
.modal {
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background: rgba(0,0,0,.8);
    transform: translateX(100%);
    transition: .6s;
}
.modal.show {
    transform: translateX(0);
}
.modal .btn {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 50px;
    background: #ccc;
    text-align: center;
    cursor: pointer;
}
.modal ul {
    position: absolute;
    right: 0;
    bottom: 50px;
    left: 0;
    margin: 0;
    padding: 10px 30px;
    background: #fff;
}
</style>
</head>
<body>
<div class="wish">
    <input
        placeholder="搜索"
        v-model.trim="keyword"
    >
    <ul>
        <li
            v-for="(d, i) in searchList"
            :key="i"
            @click="add(d)"
        >
            <p>{{ d }}</p>
            <span>+</span>
        </li>
    </ul>

    <div
        class="wish-btn"
        @click="showModal = true"
    >
        ❤️ 心愿清单({{ wishList.length }}) ❤️
    </div>

    <div
        class="modal"
        :class="{ 'show': showModal }"
        @click.self="showModal = false"
    >
        <ul>
            <li v-if="wishList.length === 0">暂无数据</li>
            <li
                v-for="(d, i) in wishList"
                :key="i"
                @click="toggle(i)"
            >
                <p :style="{ 'text-decoration': d.done ? 'line-through' : '', 'color': d.done ? 'gray' : '' }">{{ d.text }}</p>
                <span>{{ d.done ? '✓' : '✕' }}</span>
            </li>
        </ul>
        <div
            class="btn"
            @click="showModal = false"
        >关闭</div>
    </div>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({
    el: '.wish',
    data: {
        list: ['开火车','开跑车','找个好工作','杀死一只狮子','杀死一只骆驼','掌握Vue','搞定ES6'],
        wishList: [],
        showModal: false,
        keyword: ''
    },

    computed: {
        searchList() {
            const { keyword, list } = this;
            if (!keyword) return list;
            return list.filter(i => i.includes(keyword));
        }
    },

    methods: {
        add(text) {
            // 缺少判断，先判断是否在数组中存在，如果存在就不加了
            if (this.wishList.some(i => i.text === text)) return;
            this.wishList.push({
                text,
                done: false
            });
        },

        toggle(i) {
            this.wishList[i].done = !this.wishList[i].done;
        }
    }
});
</script>
</body>
</html>