<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>to do list</title>
<script src="./js/vue.js"></script>
<style>
.clickNow{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model=data>
<button v-on:click="niubi(items,data)">{{message}}</button>
<!-- 增加一个点击事件点击之后将input中的值放入到列表中并且清空input 列表中的值是在第二个值的items的数组中的-->
<h1>{{todomsg}}</h1>
<ul>
<li v-for="(item,index) in items" :key="item.message" v-show=todoin>
{{item.message}} <button v-on:click="addDone(index)">{{btnmsg}}</button><button v-on:click="remove(index)">删除</button>
<!-- 点击按钮之后，将数据添加到第三个的数据中 -->
</li>
<li v-for="(prop,count) in props" :key="prop.message" v-bind:style="{ color: 'red',textDecoration:'line-through',cursor:'pointer' }" v-on:click="addTodo(count)" v-show=donein>
{{prop.message}}
</li>
</ul>
<h1>{{donemsg}}</h1>
<button v-for="(item,num) in doneitems" :key="item.message" v-on:click="change(num)" :class="num == haha ? 'clickNow':' '">
{{item.message}}
</button>
<!-- 三个按钮，用num判断 -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '新增',
todomsg: '列表',
donemsg: '操作',
data:'',
todoin:true,
donein:true,
haha:0,
items: [{
message: '珠默朗玛修电梯'
},
{
message: '南极冰块搬运'
},
{
message: '帅过彭于晏'
}
],
props: [{
message: '睡觉'
},
{
message: '吃饭'
},
{
message: '喝水'
}
],
doneitems: [{
message: '所有'
},
{
message: '未完成'
},
{
message: '完成'
}
],
btnmsg: '完成',
},
methods: {
niubi: function (items,data) {
// console.log(value1)
// console.log(data)
if(this.data=="")return;
items.push({message:this.data});
this.data="";
},
addDone:function(index){
// console.log(index);
this.props.push(this.items[index])
this.items.splice(index, 1)
},
addTodo:function(count){
this.items.push(this.props[count])
this.props.splice(count, 1)
},
change:function(num){
if(num ===0){
this.haha=0;
this.todoin=true;
this.donein=true;
}else if(num===1){
this.haha=1;
this.todoin=true;
this.donein=false;
}else{
this.haha=2;
this.todoin=false;
this.donein=true;
}
},
remove:function(index){
this.items.splice(index, 1)
}
}
})
</script>
</body>
</html>
网友评论