Vue lograr una sencilla lista de tareas
mediante la unión manera push
el contenido entrado en list
, y luego se muestra, en combinación con básica css
estilo, para lograr Todo List
resultados
<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>
Nota: No sirve de nada
index
para identificar de forma única, ya que el uso deindex
una operación de eliminación, puede causar algunos problemas innecesarios, por lo que hemos añadido unid
hacer de identificación único