<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.donesty{
text-decoration: line-through;
color: gray;
}
#app{
background-color: #F8F8FF ;
width: 500px;
border: 1px solid gray;
margin: 50px auto;
padding:20px 50px 30px 50px;
}
</style>
</head>
<div id="app">
<h1>Todo List</h1>
<p>{{todo.filter(function(item){return item.status===false}).length}} of {{todo.length}} remaining[<a href="#" v-on:click="clearall">archive</a>]</p>
<div v-for="(item,index) in todo">
<input type="checkbox" name="" v-model="item.status" > <!---->
<span v-bind:class="{donesty:item.status}">{{item.wantdo}}</span>
<input type="button" value="x" v-on:click="jianone(index)" name="">
</div>
<div>
<input type="text" v-model="addst" name="" v-on:keyup.enter="addone">
<input type="button" value="Add" v-on:click="addone" name="">
</div>
</div>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
todo:[{id:1,wantdo:'吃饭',status:false},
{id:2,wantdo:'睡觉',status:false},
{id:3,wantdo:'打豆豆',status:false} ],
addst:''
},
methods:{
addone:function(){
if(this.addst.length){
this.todo.push({ id:this.todo.length?this.todo[this.todo.length-1].id+1:1,wantdo:this.addst.trim(),status:false })
this.addst=""
}
},
jianone:function(index){
this.todo.splice(index,1)
},
clearall:function(){
this.todo.splice(0)
}
}
})
</script>
</body>
</html>
http://todomvc.com/examples/vue/ 有时间实现这个案例
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
