Vue 实现简单TodoList
不说废话直接上代码。。。。
第一次发博客,各位大牛、大佬们不喜勿喷,个人记录,BUG肯定是有,主要面向于初学者 。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 1000%;
}
#app {
width: 100%;
height: 1000%;
background: ghostwhite;
box-sizing: border-box;
margin: 20px auto;
}
.headp {
width: 100%;
height: 80px;
padding-left: 20%;
line-height: 80px;
background: #FF0000;
color: white;
margin-bottom: 30px;
font-size: 22px;
}
.one-ipt {
margin-left: 20%;
width: 50%;
height: 30px;
margin-bottom: 50px;
padding: 0 10px;
}
.one-ul {
width: 50.5%;
height: auto;
list-style: none;
margin-left: 20%;
background: white;
padding: 10px;
padding-bottom: 0px;
}
.one-ul>li {
border-bottom: 1px solid gainsboro;
width: 94%;
height: 40px;
line-height: 40px;
display: flex;
padding: 0 10px;
margin-bottom: 30px;
}
.text-span {
margin-left: 20px;
width: 85%;
height: 100%;
}
.xiu-span {
margin-left: 20px;
width: 85%;
height: 100%;
}
.xiu-ipt {
width: 85%;
height: 20px;
}
.state-box{
width: 95%;
height: 40px;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
padding:0 20%;
}
.state-ul{
width: 40%;
height: 100%;
list-style: none;
display: flex;
}
.state-ul li{
width: 33.3%;
height: 100%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.state-li{
border:1px solid gray;
}
</style>
</head>
<body>
<div id="app">
<p class="headp">任务计划</p>
<input type="text" placeholder="吃饭睡觉打豆豆" v-model="txt" @keydown.enter="add()" class="one-ipt" />
<div class="state-box">
<p style="color: #FF0000;">共有{{arr.length}}个任务</p>
<ul class="state-ul" >
<li v-for="(v,i) in statelist" @click="clss(i)" :class="{'state-li':stateclass == i}"> {{v.txt}}</li>
</ul>
</div>
<br>
<p style="margin-left: 20%;margin-bottom: 20px;" v-show="fl">还有{{wc?arr.length:nos}}项任务未完成</p>
<ul class="one-ul" v-show="fl">
<span>未完成 :</span>
<br>
<br>
<li style="color: #FF0000;" v-show="!arr.length">还没有添加任何任务.......</li>
<li v-for="(v,i) in arr" v-if="!v.ichecked" @mouseover="show(i)" @mouseout="hied(i)">
<span><input type="checkbox" name="chek" @click="chek($event,i)" /></span>
<span @dblclick="xiu(i)" v-if="v.flag" class="text-span">{{v.txt}}</span>
<span class="xiu-span"><input type="text" v-if="!v.flag" v-model="xiutxt" @keydown.enter="add2(i)" class="xiu-ipt" /></span>
<span class="del-span"><button @click="del(i)" class="del-ipt" style="background: none;border: none;" v-show="v.show">X</button></span>
</li>
</ul>
<p style="margin-left: 20%;margin-bottom: 20px;" v-show="fl1">已完成{{oks}}项任务</p>
<ul class="one-ul" v-show="fl1">
<span>以完成 :</span>
<br>
<br>
<li style="color: #FF0000;" v-show="!arr.length">还没有完成任何任务.......</li>
<li v-for="(v,i) in arr" v-if="v.ichecked" @mouseover="show(i)" @mouseout="hied(i)">
<span><input type="checkbox" name="chek" checked="checked" @click="chek($event,i)" /></span>
<span @dblclick="xiu(i)" v-if="v.flag" class="text-span"><del>{{v.txt}}</del></span>
<span class="del-span"><button @click="del(i)" class="del-ipt" style="background: none;border: none;" v-show="v.show">X</button></span>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
txt: "", //获取数据的输入框的值
xiutxt: "", //修改框的数据的值
arr: [], //用来存数据的数组
wc: true, //用来判断已完成显示的数值 ---120行
oks: 0, //用来存储已完成的数量
nos: 0, //用来存储未完成的数量
stateclass:0, //用来通过下标更改class
statelist:[
{txt:"所有任务",ishow:true},
{txt:"未完成的项目",ishow:false},
{txt:"已完成的项目",ishow:false}
],
fl:true,
fl1:true
},
methods: {
add() {
if (this.txt == "") {
alert("数据不能为空")
} else {
this.arr.push({
txt: this.txt,
flag: true,
show: false,
ichecked: false
})
this.txt = ""
}
},
del(i) {
this.arr.splice(i, 1)
let num = 0;
let num1 = 0;
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i].ichecked) {
num++
}
if (!this.arr[i].ichecked) {
num1++
}
}
this.wc = false
this.oks = num
this.nos = num1
},
xiu(i) {
console.log(i)
this.arr[i].flag = !this.arr[i].flag
},
add2(i) {
this.arr[i].flag = !this.arr[i].flag
if (this.xiutxt == "") {
this.arr.splice(i, 1)
} else {
this.arr[i].txt = this.xiutxt
}
},
show(i) {
this.arr[i].show = true
},
hied(i) {
this.arr[i].show = false
},
chek(ev, i) {
let a = ev.target.checked
this.arr[i].ichecked = a
let num = 0;
let num1 = 0;
for (let i = 0; i < this.arr.length; i++) {
if (this.arr[i].ichecked) {
num++
}
if (!this.arr[i].ichecked) {
num1++
}
}
this.wc = false
this.oks = num
this.nos = num1
console.log(a)
console.log(num, num1)
},
clss(i){
this.stateclass = i
if(i == 0){
this.fl = true
this.fl1 = true
}
if(i==1){
this.fl1 = false
this.fl = true
}
if(i==2){
this.fl1 = true
this.fl = false
}
}
}
})
</script>
</html>
。。。小菜鸟一只,谢谢各位