前端Vue基础知识---实现简单todoListdemo

前端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>