用vue实现todolist/源码/思路

最新推荐文章于 2022-12-01 17:44:10 发布

侠客博园

最新推荐文章于 2022-12-01 17:44:10 发布

阅读量469

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wen15191038073/article/details/120531894

版权

todolist思路

一、添加思路：
1.将JSON对象用v-for循环遍历到ul里面；
2.给按钮添加点击事件创建函数；
3.在函数中需要得到输入框的值；
4.把得到的数据push到数组中；this.arr.push({title:this.inputval}),
5.清空输入框 this.inputval=’’
二、任务总数：
获取数组数据的长度
三、点击变色
1.给遍历出来的数组去添加复选框；
2.当勾到复选框时，要知道勾选那条数据(添加一个状态的布尔值
所以需要修改数据给每一条数据添加一个用来保存状态的布尔值)
3.给需要改变样式的dom内容使用三元运算符判断那个布尔值从而添加或者删除类名
4.设置类样式
四、剩余数量
1.函数在{{}}中调用会发生什么会显示return的内容
2.循环数据判断数据中的ck是否为false 如果为false那么就让一个保存数量的变量自增1 return 出去这个变量
五、点击修改
（1）给每次便利的时候添加一个输入框
（2）通过v-model双向绑定数据在输入框上
（3）通过v-if与v-else来控制展示内容于输入框每次只能显示一个（但是需要一个变量来保存具体显示谁）
（4）给展示内容的span添加一个点击事件修改edit这个变量进行去反操作
（5）在给修改数据的input添加一个blur事件改变edit
六、勾选删除
(1)给点击删除按钮添加事件调用函数
(2)在函数中创建一个空的数组
(3)把原始数据赋值给这个空数组
(4)把原始数据清空
(5)循环这个新数据判断这个数据中的ck是否等等于false
(6)如果等于false 就把这条数据push到原始数据中
七、当删除完成后显示暂无数据
1.判断arr数组长度
源码走起！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
       .red{
            background-color: red;
        }
  </style>
</head>
<body>
    <div id="demoDiv">
        <h2>任务列表</h2>
        <p>任务总数：{{arr.length}},还有:{{fe()}}未完成，<span @click='wan()'>完成</span></p>
        <ul v-if='arr.length!=0'>
            <li v-for="(v,i) in arr">
                <input type="checkbox" v-model='v.ck'>
               <span v-bind:class="v.ck?'red':''" v-if='!v.edit' @click='v.edit=true'>{{v.title}}---{{v.ck}}</span> 
               <input type="text" v-model='v.title' v-else @blur='v.edit=false'>
            </li>
        </ul>
        <h1 v-else>暂无数据</h1>
        <input type="text" v-model='inputval'><button @click='fu()'>添加</button>
        <p>{{inputval}}</p>
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
        new Vue({
            data:{
                inputval:'',
                arr:[
                    {title:'设计',ck:false,edit:false},
                    {title:'编写页面代码',ck:false,edit:false},
                    {title:'编写js代码',ck:false,edit:false},
                    {title:'设计产品原型',ck:false,edit:false}
                ]
            },
            el:'#demoDiv',
            methods:{
                fu(){
                   console.log(this.inputval); 
                   this.arr.push({title:this.inputval,ck:false,edit:false}),
                   this.inputval=''
                },
                fe(){
                    newarr=0
                   this.arr.forEach((item,index) => {
                      if(item.ck==false){
                        newarr++
                      }
                      
                   }); 
                   return newarr
                },
                wan(){
                    let newstr=[];
                    newstr= this.arr;
                    this.arr=[];
                    for(let i=0;i<newstr.length;i++){
                        if(newstr[i].ck==false){
                            this.arr.push(newstr[i])
                            console.log(i);
                        }
                    }
                }
            }
        })
</script>

各位同友源码有点小bug但整体不影响功能的实现，😊😜

侠客博园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用vue实现todolist/源码/思路

todolist思路一、添加思路：1.将JSON对象用v-for循环遍历到ul里面；2.给按钮添加点击事件创建函数；3.在函数中需要得到输入框的值；4.把得到的数据push到数组中；this.arr.push({title:this.inputval}),5.清空输入框 this.inputval=’’二、任务总数：获取数组数据的长度三、点击变色1.给遍历出来的数组去添加复选框；2.当勾到复选框时，要知道勾选那条数据(添加一个状态的布尔值所以需要修改数据给每一条数据添加一个用来
复制链接

扫一扫