没有封装的简单vue todo

Posted 2021-01-17 sulanlan

<template>
  <div id="app">

    <input type=‘text‘ v-model=‘todo‘ @keyup.enter="doAdd"/> <button @click="doAdd()"> +增加</button>
<br><hr><hr>

<h2>进行中</h2>
  <ul >  
    
    <li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox"  v-model=‘item.checked‘ @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button>
    </li>
    </ul>

<h2>已完成</h2>

      <ul class="finish">  
    
    <!--<li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox" v-modle="item.checked">{{item.title} ---- <button @click="domin(key)"> 删除</button>-->
     <li v-for="(item,key) in list" v-if="item.checked">
       <input type = "checkbox"  v-model=‘item.checked‘ @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button>
  
    </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
     // msg: "Welcome to Your Vue.js App",
      todo: "",
      list: []
    };
  },
  methods: {
    doAdd() {
     // console.log(e.keyCode)
      //if(e.keyCode==13){
      this.list.push({title:this.todo, checked: null})
      this.todo = "";
    //}
       localStorage.setItem(‘list‘,JSON.stringify(this.list))
    },

//  handAdd() {
    
//       this.list.push({title:this.todo, checked: null})
//       this.todo = "";
    
       
//     },

    domin(key) {
      //alert(key)
      this.list.splice(key, 1);//key必须，key后面的1是删除几个，也是必须。
         localStorage.setItem(‘list‘,JSON.stringify(this.list))
    },
   saveList(){
     localStorage.setItem(‘list‘,JSON.stringify(this.list))
   },
  
  
  },

  mounted() {//不要放错位置
      var list = JSON.parse(localStorage.getItem(‘list‘));
      if(list){
        this.list=list;
      }
    }
}
</script>

<style lang="scss">
#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;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
 // display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.finish{
  background: greenyellow
  
}
</style>