todolist

<!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>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <style>

        .red{

            background-color: red;

        }

    </style>

</head>

<body>

    <!--

        1.添加功能

        1-1 先写模拟数据  并且把这个模拟数据以列表的方式展示

        1-2 给添加按钮进行点击事件的添加

        1-3  在刚才创建的函数中 得到输入框的值

        1-4 在进行添加  把输入框的值添加到iobj这个数组上

        1-5 添加完成清空输入框

        2.任务总数

        思考   {{表达式}}

        3.勾选变色

        3-1 在列表中先完成相关的页面布局

        3-2  在每一条数据上面加一个用来保存是否勾选的状态变量

        3-3 我们可以把这个状态变量  与复选框进行绑定   从而当复选框勾选的时候 让这个状态变量进行真之间的切换

        3-4  给需要改变的dom元素 设置class类名  并且在类名中使用三元运算符  来动态的添加或者移除样式即可

        3-5 写出相关的样式

        4.剩余数量

        4-1 {{表达式}} {{放一个函数会发生什么?会把函数的返回值显示出来}}

        4-2  在函数中  循环数据   并且判断数据的style是否为false

        4-3  如果为false  那么我们就可以转让一个计数器变量++

        4-4 在循环完毕后  把这个计数器变量  return出去

     

        5勾选删除

        5-1 删除按钮添加事件调用函数

        5-2 把原始数据  赋值给一个新变量保存(此时   我们的数据 在data中的变量和  新变量中都有一份)清空原始数据

        5-3 循环新数据  判断新数据中的  style是否为false

        5-4   并且把新数据为false的内容  push到原始数据中

     

        6暂无数据

        6-1 需要在页面中添加暂无数据的dom内容

        6-2  v-if 与  v-else 条件渲染  来进行判断

        6-3   判断数据的length是否为0  为0 就是没有数据  反之有数据

        7点击修改

        7-1 在页面中指定的位置添加一个输入框 并且把输入框和 展示的变量双向绑定起来

        7-2 在每条数据上面添加一个变量 这个变量的作用就是用来控制每一条数据的输入框显示状态

        7-3 使用条件渲染  判断这个edit变量 从而让显示文字或者显示输入框

        7-4 给文字添加点击事件  并且给  输入框添加光标移出事件     调用相同一个函数  

        7-5  在这个函数中编写  点击的是哪一条数据  就让这一条数据的edit变量取反

     

    -->

    <div id="demoDiv">

        <h1>任务列表</h1>

        <p>任务总数:{{obj.length}}--还有:{{sheng()}} 未完成: <button @click="del()">完成</button></p>

        <ul v-if="obj.length!=0">

            <li v-for="(v,i) in obj" v-bind:key="i">

                <input type="checkbox" v-model="v.style"/>

                <span :class="v.style?'red':''" v-if="v.edit" v-on:click="edit(i)">{{v.title}}</span>

                <input type="text" v-model="v.title" v-else @blur="editTwo(i)"/>

            </li>

        </ul>

        <h1 v-else>暂无数据!!!^_^</h1>

        <input type="text" v-model="inputval"/><button @click="add()">添加</button>

    </div>

    <script>

        new Vue({

            el:"#demoDiv",

            data:{

                obj:[

                    {title:"设计",style:false,edit:true},

                    {title:"编写页面代码",style:false,edit:true},

                    {title:"编写js代码",style:false,edit:true},

                    {title:"设计产品原型",style:false,edit:true},

               ],

                inputval:""

            },

            methods:{

                // 点击修改

                edit(i){

                    this.obj.forEach((item,index)=>{

                        item.edit=true

                    });

                    this.obj[i].edit=!this.obj[i].edit

                },

                editTwo(i){

                    this.obj[i].edit=true

                },

                // 删除

                del(){

                    let newObj=this.obj

                    this.obj=[]

                    for(var i=0;i<newObj.length;i++){

                        if(newObj[i].style==false){

                            this.obj.push(newObj[i])

                        }

                    }

                },

                add(){            

                    console.log(this.inputval)

                  this.obj.push({title:this.inputval,style:false,edit:true})

                    this.inputval=""

                },

                // 剩余数量

                sheng(){

                    let num=0;

                    this.obj.forEach((item,index)=>{

                        if(item.style==false){

                            // 没有勾选的

                            num+=1

                        }

                    });

                    return num;

                }

            }

        })

    </script>

</body>

</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值