Vue 实现简单的Todo List
通过双向绑定push输入的内容到list中，再展示出来，结合基本的css样式，实现Todo List效果
<html>
<head>
<style>
li{
list-style-type: none;
}
.todo{
text-decoration:line-through;
color:#C0C0C0;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type='text' v-model='info'>
<button @click='addList'>添加</button>
</div>
<ul>
<li v-for="(item,id) in list" :class="{todo : checkBoxIndex.indexOf(id)>-1}">
<input @click='getState(id)' type="checkbox" />
{{item.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
info:'',
key:1,
checkBoxIndex:[],
list:[]
}
},
methods:{
addList(){
if(typeof this.info == "undefined" || this.info == null || this.info == ""){
alert('请输入内容');
}else {
this.list.push({
name:this.info,
id:this.key++
});
this.info = '';
}
},
getState(id){
if(this.checkBoxIndex.indexOf(id)>-1){
var index = this.checkBoxIndex.indexOf(id);
this.checkBoxIndex.splice(index,1);
}else {
this.checkBoxIndex.push(id);
}
}
}
})
</script>
</body>
</html>
注意：没有用
index唯一标识，是因为使用index进行删除操作时，可能会造成一些不必要的麻烦，所以就新增了一个id做唯一标识
