前端Vue基础知识—实现简单todoListdemo
v-mode : 双向数据绑定
v-for : 循环遍历数组对象数据
v-on:click = @click : 绑定执行事件
v-if : 对数据状态进行判断,从而决定执行
v-bind : 绑定属性变量(动态属性)
未完待续…
demo效果如下:
代码如下:
<template>
<div id="app">
<!-- todoList效果 -->
<input type="text" v-model="todo" @keydown="addData($event)"/>
<button @click="add()"> + </button>
<br>
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"/> {{item.title}} ------ <button @click="removeData(key)"> - </button>
</li>
</ul>
<br>
<hr>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model="item.checked"/> {{item.title}} ------ <button @click="removeData(key)"> - </button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
todo:'',
list:[]
}
},
methods:{
add(){
this.list.push({
title:this.todo,
checked:false
});
this.todo='';
},
addData(e){
if(e.keyCode===13){
this.list.push({
title:this.todo,
checked:false
});
}
this.todo='';
},
removeData(key){
this.list.splice(key,1)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color: red
}
.blue{
color: blue
}
.box{
width: 100px;
height: 100px;
background: lightcoral;
}
</style>