Implementation of todolist / source code / idea with vue

todolist idea

1, Add ideas:
1. Traverse JSON objects into ul with v-for loop;
2. Add click event creation function to the button;
3. You need to get the value of the input box in the function;
4. Push the obtained data into the array; this.arr.push({title:this.inputval}),
5. Clear the input box this.inputval = '"
2, Total tasks:
Gets the length of the array data
3, Click color change
1. Add a check box to the traversed array;
2. When the check box is checked, you should know which data is checked (add a Boolean value of the status)
Therefore, you need to modify the data and add a Boolean value to each data to save the state)
3. Use the ternary operator to judge the Boolean value for the dom content that needs to change the style, so as to add or delete the class name
4. Set class style
4, Remaining quantity
1. what happens in the function called in return?
2. Loop data to determine whether the ck in the data is false. If it is false, let a variable of saved quantity increase by 1. Return this variable
5, Click Modify
(1) Add an input box for each convenience
(2) Bind data on the input box through v-model
(3) The display content can only be displayed one at a time in the input box through v-if and v-else (but a variable is required to save the specific display)
(4) Add a click event to the span of the display content, and modify the edit variable to reverse the operation
(5) Add a blur event to the input of the modified data to change the edit
6, Check delete
(1) Add an event call function to the click Delete button
(2) Create an empty array in the function
(3) Assign the original data to this empty array
(4) Clear the original data
(5) Loop the new data to determine whether ck in the data is equal to false
(6) If it is equal to false, push the data into the original data
7, When the deletion is completed, no data is displayed
1. Judge the length of arr array
Source code up!!!!

<!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>task list</h2>
        <p>Total tasks:{{arr.length}},also:{{fe()}}hang in the air,<span @click='wan()'>complete</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>No data</h1>
        <input type="text" v-model='inputval'><button @click='fu()'>add to</button>
        <p>{{inputval}}</p>
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
        new Vue({
            data:{
                inputval:'',
                arr:[
                    {title:'Design',ck:false,edit:false},
                    {title:'Write page code',ck:false,edit:false},
                    {title:'to write js code',ck:false,edit:false},
                    {title:'Design product prototype',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>

There are some small bug s in the source code, but it does not affect the implementation of the function as a whole, 😊😜

Tags: Vue.js

Posted on Tue, 28 Sep 2021 03:35:59 -0400 by KindMan