话不多说:直接撸起袖子直接淦 !!!!!
CSS片段:
//官方的Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
//CSS片段
<style type="text/css">
#app {
width: 350px;
margin: 50px auto;
}
li {
list-style-type: none;
}
ul {
padding-left: 0;
}
.add {
width: 200px;
height: 20px;
margin-right: 10px;
}
.finish {
color: #ccc;
text-decoration: line-through;
}
.span1 {
color: skyblue;
}
</style>
<body>片段:
<div id="app">
<!--
如何计算未完成的任务总数:
将 arr 进行遍历,能够拿到 obj.bol 值;
通过判断 obj.bol 的真假,就知道当前这条任务是否完成;
如果完成,不做计算;如果未完成,将其加入到未完成的数量中;
-->
<h1>任务列表</h1>
<p>任务总数:{{ arr.length }};还有:{{ choose() }} 未完成;【<span @click='finish()' class="span1">完成</span>】</p>
<ul>
<li v-for='(item,index) in arr' v-bind:class='{finish: item.bol}'>
<input type="checkbox" v-model='item.bol' @click.stop='choose(index)'></input>
<span v-show='!item.edit' @click='edit(index)'>{{ item.des }}</span>
<input v-show='item.edit' type="text" v-model='item.des' @blur='item.edit=false'></input>
</li>
</ul>
<input type="text" class="add" v-model='msg'></input>
<button @click='add()'>添加</button>
</div>
</body>
<script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
arr: [
// 每条数据中应该有数据的内容,和 数据的状态
{ des: '设计产品原型', bol: false, edit: false },
{ des: 'UI设计', bol: false, edit: false },
{ des: '编写页面代码', bol: false, edit: false },
{ des: '编写js代码', bol: false, edit: false },
],
msg: ''
},
methods: {
add: function () {
if(this.msg == '')
return;
// 向数组中添加内容
this.arr.push({ des: this.msg, bol: false });
this.msg = '';
},
choose: function (i) {
// i代表当前点中的数据的下标
// 返回当前数据的一个状态(bol)
// 遍历数组
// arr.forEach(function(item){逻辑操作})
// item 代表每次遍历后得到的值
var num = 0; //未完成任务数量
for(let j=0;j<this.arr.length;j++){
if (! this.arr[j].bol) { //当前任务未完成
// 增加未完成任务的数量
num++;
}
}
return num;
},
finish: function () {
// 遍历数组,通过判断bol值,来判断当前待办事项是否完成。
// 如果完成,那么删除
// for (var i = 0; i < this.arr.length; i++){
// if (this.arr[i].bol) {
// // 删除掉
// this.arr.splice(i,1);
// }
// }
// 添加功能
// this.arr
// var temp = this.arr; this.arr清空
// 遍历temp,如果bol值判断结果为未完成,那么将数据push到this.arr
var temp = this.arr;
this.arr = [];
for (var i = 0; i < temp.length; i++) {
if (!temp[i].bol) {
this.arr.push(temp[i]);
}
}
},
edit: function (i) {
if (this.arr[i].bol) {
return;
}
this.arr[i].edit = true;//切换为编辑状态
}
}
});
</script>
</script>
流程图:
效果显示: