vue todoList

<template>

  <div id="app">

  <div class="mato">

      <input type="text" class="mato_input" oninput = "value=value.replace(/[\u4E00-\u9FA5]/g,'')" placeholder="吃饭睡觉打豆豆" v-model="inputValue">

      <button @click="add" class="mato_add">add</button>

      <ul class="mato_ul">

        <li v-for="(item,index) of totolist" :key="index">

          <input type="checkbox">        

          <label>{{item}}</label>

          <label @click="del" class="ft">x</label>

        </li>

      </ul>

    </div>

     </template>

export default {

  name: 'App',

  data(){

    return{

      inputValue:'',

      totolist:[]

    }

  },

  methods:{

    add:function(){

       this.totolist.push(this.inputValue);

       this.inputValue = '';//清空input的值

 

    },

    del:function(key){

        this.totolist.splice(key, 1);//splice方法删除对应下标

    }

  }

}

</script>

*{margin: 0;padding:0;}

.ft{float:right;margin-right: 20px;cursor: pointer;}

a{text-decoration:none;color:#000;}

ul,li{list-style: none;}

.finished{

  text-decoration: line-through;

}

.mato{width:500px;height:200px;margin:0 auto;margin-top: 80px;background-color: #231f1f;display:table;}

.mato_input{

  width:430px;

  height:30px;

  outline: none;

  border:none;

  padding-left: 20px;

}

.mato_add{

  width:42px;

  height:30px;

  margin-left: 4px;

  background-color: #fff;

  border:none;

  cursor:pointer;

  outline:none;

}

.mato_ul li{

  color:#fff;

  line-height: 1.8;

  border-bottom:solid 1px #fff;

  cursor:pointer;

}