源码
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个的实例</title>
<style>
li{margin-bottom: 1rem;}
.check{color: darkgray;text-decoration: line-through;}
</style>
</head>
<body>
<div id="app">
<h1>这是一个todo list</h1>
<p>{{ unchecklength }} 个未完成任务</p>
<ol>
<!-- (todo , index) in todos
todo 可以是任意的，
todos 是data里面定义的
v-bind:class(:class) 一个对象，以动态地切换 class
-->
<li v-for="(todo , index) in todos" :class="{check:todo.check}">
<input type="checkbox" v-model="todo.check"/>{{todo.text}}
<button @click="deletelist(index)">x</button>
</li>
</ol>
<!--@keydown.enter 回车添加 -->
<input type="text" v-model="addtext" @keydown.enter="addlist"/>
<!-- @click == v-on:click -->
<button @click="addlist">add</button>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
todos:[
{
id:0,
text:'vue0.js 好',
check:true
},{
id:1,
text:'node.js 好',
check:false
},
{
id:2,
text:'赚钱最好',
check:false
}
],
addtext:''
},
methods:{
addlist(){
//console.log(this.addtext)
var todo = this.todos;
if(!this.addtext){
return
}
todo.push({id:todo.length,text:this.addtext,check:false});
this.addtext='';
},
deletelist(index){
console.log("delete");
//splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
this.todos.splice(index,1);
}
},
computed:{//计算属性
unchecklength() {
/*
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。 不会改变原始数组。
*/
console.log(this.todos)
return this.todos.filter(function(i){
return i.check === false
}).length
}
}
})
</script>
</body>
</html>
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
