TodoList(vue)

最新推荐文章于 2023-07-04 17:24:53 发布

文阳兄

最新推荐文章于 2023-07-04 17:24:53 发布

阅读量116

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/107673962

版权

用简单一种方法写

用vue组件写

第一步利用了父传子
第二步利用了子传父

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

<body>
    <div id="app">
        <h1>ToDoList<input type="text" @keyup.enter="addthing" v-model="thing"></h1>
        <!-- 需求是 当鼠标按下的时候输入表格的值  添加到 正在进行 里面的数据 让其显示
         有二个所以用组件写 详情看下面操作
         来什么二个空的数据来接收他俩的值
        -->
        <!-- 然后把定义的组件写在页面上 -->


        <!-- 这是正在进行 -->
        <!--@监听自定义的属性 里面为值  -->
        <list :list1="reject"  @toggle="toggle11"></list>
        <!-- 这是已经完成 -->
        <list :list1="resolve" @toggle="toggle12"></list>
    </div>
    <script>
        //因为dom结构一样 定义一个组件让父共用子的这个组件 
        // 这里面有数据 共用的数据
        const List = {
            props:['list1'],
            template: `
        <div>
            <h1><span>正在进行</span>-----------<span>{{list1.length}}</span></h1>
                    <ul>
                <li v-for="(item,index) in list1" @click="toggle(index)">{{item}} --------<span @click.stop="del(index)">del</span></li>
        </ul>  
        </div>
        `,
            methods: {
                toggle(index){
                    //记住上面还有点击所以用来发送他的值 
                    // 参数一为自定义属性 2为接收要点击的哪个索引值
                    this.$emit('toggle',index)
                },
                del(index){
                this.list1.splice(index,1)
                }
            }
        }
        // 需求分析：1. 用户填完信息回车后，将信息存入数组
        var vm = new Vue({
            el: '#app',
            data: {
                thing: '', //这是获取表单的值 使其最初显示为空
                 //声明二个空数组 这二个是接收上面那二个传的值 然后在dom结果里面进行渲染
                reject: [],
                resolve: []
            },
            methods: {
                addthing() {
                    this.reject.push(this.thing);
                    this.thing = ''
                },
                toggle11(index){
                    this. resolve.push(this.reject[index]);
                    this.reject.splice(index,1)
                },
                toggle12(index){
                    this.reject.push(this.resolve[index]);
                    this. resolve.splice(index,1)
                }
            },
            components: {
                List
            }
        });
    </script>
</body>

大概样式
在这里插入图片描述

文阳兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TodoList(vue)

用简单一种方法写用vue组件写第一步利用了父传子第二步利用了子传父<script src="../vue.min.js"></script><body> <div id="app"> <h1>ToDoList<input type="text" @keyup.enter="addthing" v-model="thing"></h1> <!-- 需求是当鼠标按下的时
复制链接

扫一扫