Vue achieve a simple Todo List
by way binding pushcontent entered into list, and then displayed, combined with basic cssstyle, to achieve Todo Listresults
<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>
Note: There is no use
indexto uniquely identify, because the use ofindexa delete operation, it may cause some unnecessary trouble, so we added aiddo unique identification
