zoukankan      html  css  js  c++  java
  • 7. Vue3 实现toDoList,以及类似京东App搜索缓存数据功能

    一、Vue3.x中集成Sass/scsss

    1.1、安装sass-loader node-sass

    npm install -D sass-loader node-sass

    1.2、style中配置sass/scss

    lang可以配置scss ,scoped表示这里写的css只有当前组件有效

    <style lang = "scss" scoped>
        h2 {
            text-align: center;
        }
    </style>

    二、Vue3.x 实现一个完整的toDoList(待办事项) 以及类似京东App搜索缓存数据功能

     2.1、vuedemo-v-show

    <template>
    <h2>Vue实现TodoList</h2>
    <div class="todolist">
        <input type="text" v-model="todo" @keyup.enter="addData()" />
        <hr />
        <h4>正在进行</h4>
        <ul>
            <li v-for="(item, index) in list" :key="index" v-show="!item.checked">
                <input type="checkbox" v-model="item.checked" /> {{ item.title }}----
                <button @click="deleteData(index)">删除</button>
            </li>
        </ul>
    
        <h4>已经完成</h4>
        <ul>
            <li v-for="(item, index) in list" :key="index" v-show="item.checked">
                <input type="checkbox" v-model="item.checked" /> {{ item.title }}----
                <button @click="deleteData(index)">删除</button>
            </li>
        </ul>
    </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                todo: "",
                list: [],
            };
        },
        methods: {
            addData() {
                this.list.push({
                    title: this.todo,
                    checked: false,
                });
                this.todo = "";
            },
            deleteData(key) {
                // alert(key)
                this.list.splice(key, 1);
            },
        },
    };
    </script>
    
    <style lang="scss">
    h2 {
        text-align: center;
    }
    
    .todolist {
         500px;
        border: 1px solid #eee;
        margin: 0 auto;
        padding: 20px;
    
        h3 {
            color: red;
            font-size: 40px;
        }
    }
    </style>
    

     2.2、vuedemo-v-if

    <template>
    <h2>Vue实现TodoList</h2>
    <div class="todolist">
        <input type="text" v-model="todo" @keyup.enter="addData()" />
        <hr />
        <h4>正在进行</h4>
        <ul>
            <template v-for="(item, index) in list" :key="index">
                <li v-if="!item.checked">
                    <input type="checkbox" v-model="item.checked" /> {{ item.title }}----
                    <button @click="deleteData(index)">删除</button>
                </li>
            </template>
        </ul>
    
        <h4>已经完成</h4>
        <ul>
            <template v-for="(item, index) in list" :key="index">
                <li v-if="item.checked">
                    <input type="checkbox" v-model="item.checked" /> {{ item.title }}----
                    <button @click="deleteData(index)">删除</button>
                </li>
            </template>
        </ul>
    </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                todo: "",
                list: [],
            };
        },
        methods: {
            addData() {
                this.list.push({
                    title: this.todo,
                    checked: false,
                });
                this.todo = "";
            },
            deleteData(key) {
                // alert(key)
                this.list.splice(key, 1);
            },
        },
    };
    </script>
    
    <style lang="scss">
    h2 {
        text-align: center;
    }
    
    .todolist {
         500px;
        border: 1px solid #eee;
        margin: 0 auto;
        padding: 20px;
    
        h3 {
            color: red;
            font-size: 40px;
        }
    }
    </style>
    

    image-20201028154224503.png

    image-20201028154231727.png

  • 相关阅读:
    bzoj4262
    bzoj3252
    海蜇?海蜇!
    AGC018F
    java数据类型;常量与变量;类型转化;
    java 基础,查看jar包源码,JD-GUI
    性能测试报告
    如何防止http请求数据被篡改
    支付业务,测试遇到请求超时怎么处理;支付业务流程;异步通知和同步通知;
    fiddler使用;
  • 原文地址:https://www.cnblogs.com/guxia/p/14390919.html
Copyright © 2011-2022 走看看