案例要求
使用 vue 完成案例;
输入任务,按回车添加任务;
点击复选框表示已经完成任务;
点击删除任务;
*{
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;
}
<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>