vue实现TodoList案例，适合新手入门

100 阅读 0 评论 66 点赞

我是靠谱客的博主娇气皮皮虾，这篇文章主要介绍vue实现TodoList案例，适合新手入门，现在分享给大家，希望可以做个参考。

案例要求
使用 vue 完成案例；
输入任务，按回车添加任务；
点击复选框表示已经完成任务；
点击删除任务；

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{
 margin: 0;
     padding: 0;
     list-style: none;
 }

 #app{
     width: 300px;
     height: 1000px;
     margin: 50px auto;
 }
 #app>.top{
     width: 100%;
     height: 20px;
     text-align:center
 }
 h2{
     margin-top: 10px;
 }
 h2>button{
     float: right;
 }
 ul>li{
     background: pink;
     margin: 2px;
 }
 ul>li>button{
     float: right;
 }

复制代码

<h2>
                已经完成  ---  {{ arr.length - len }}
            </h2>
            <ul>
                <li v-for="(item, index) in arr" v-show = "item.checked">
                    <input v-model = "item.checked" type="checkbox">
                    {{ item.val }}     
                    <button>删除</button>
                </li>
            </ul>
        </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 <div id="app">
        <input v-model = "val" type="text">
        <button @click = "addItem">添加</button>
        <div>
            <h2>
                正在进行  ---  {{ len }}
            </h2>
            <ul>
                <li v-for="(item, index) in arr" v-show = "!item.checked">
                    <input v-model = "item.checked" type="checkbox">
                    {{ item.val }}     
                    <button>删除</button>
                </li>
            </ul>

            <h2>
                已经完成  ---  {{ arr.length - len }}
            </h2>
            <ul>
                <li v-for="(item, index) in arr" v-show = "item.checked">
                    <input v-model = "item.checked" type="checkbox">
                    {{ item.val }}     
                    <button>删除</button>
                </li>
            </ul>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
     new Vue({
         el: "#app",
         data: {
             // input中输入的值
             val: "",
             // 总的任务
             arr: []
         },
         // created() {
             // forEach  没有返回值
             // map   有返回值
             // filter   做筛选
             // var datas = this.arr.filter((item) => {
             //     return item === 2
             // })
             // // [2]
             // console.log(datas)
         // }, 
         computed: {
             len() {
                 return this.arr.filter((item) => {
                     return item.checked === false
                 }).length
             }
         },
         methods: {
             addItem() {
                 this.arr.push({
                     val: this.val,
                     checked: false
                 })
                 this.val = ""
             },
             deleteSelected(){
                 this.arr.splice(0,1)
             },
         }
     })
 </script>