todolist

modle.js

 

 

 

<tem

const storage = {

  set (key, value) {

     localStorage.setItem(key, JSON.stringify(value))

  },

  get (key) {

    return JSON.parse(localStorage.getItem(key))

  },

  remove (key) {

      localStorage.removeItem(key)

  }

 

}

 组件本身

export default storage

plate>

  <div class="tofo">

    <h1>todoList 列表</h1>

    <hr />

    <input type="text" v-model="todoValue" @keyup.enter="keyUp" />

    <hr />

    <div>

      <h1>未完成</h1>

      <ul>

        <template v-for="(item, index) in list" :key="index">

          <li v-if="!item.checked">

            <input type="checkbox" name="" id="" v-model="item.checked"  @change="changeItem"/>

            {{ item.value }}---<button @click="delItem(index)">删除</button>

          </li>

        </template>

      </ul>

      <h1>已经完成</h1>

      <ul>

        <template v-for="(item, index) in list" :key="index">

          <li v-if="item.checked">

            <input type="checkbox" name="" id="" v-model="item.checked" @change="changeItem"/>

            {{ item.value }}---<button @click="delItem(index)">删除</button>

          </li>

        </template>

      </ul>

    </div>

  </div>

</template>

 

<script>

import storage from '../model/model.js'

export default {

  data() {

    return {

      list: [],

      todoValue: ""

    };

  },

  methods: {

    // 添加

    keyUp() {

      if (this.todoValue) {

        this.list.push({

          value: this.todoValue,

          checked: false

        });

        this.todoValue = "";

        storage.set('todolist', this.list)

        // localStorage.setItem('todolist', JSON.stringify(this.list))

      }

    },

 

    // @click="delItem(index)"

    delItem(index) {

      this.list.splice(index, 1);

           storage.set('todolist', this.list)

      // localStorage.setItem('todolist', JSON.stringify(this.list))

    },

    changeItem () {

           storage.set('todolist', this.list)

      // localStorage.setItem('todolist', JSON.stringify(this.list))

    }

  },

  mounted() {

    let statr = storage.get('todolist')

    // let statr = JSON.parse(localStorage.getItem('todolist'))

    if (statr) {

      this.list = statr

    }

  },

};

</script>

 

<style lang='scss' scoped>

.tofo {

  width: 500px;

  height: 300px;

  border: 1px solid #333333;

  position: absolute;

  left: 900px;

  top: 0;

  h1 {

    text-align: center;

  }

  input {

    margin-left: 100px;

  }

}

</style>