vue之菜單添加選擇，知識：數據雙向綁定、循環渲染、事件點擊以及按鍵的點擊

要求：

1.可以增加菜名

2.可以刪除菜名

3.點擊選擇菜名后自動增加到已選菜單中

4.可以在已選菜單中取消選擇

 

代碼：

<template>
  <div>
    <input type="text" ref="add">
    <button @click="addE()">增加菜名</button>
    <hr />
    <h2>當前菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>
    <hr />
    <h2>已選菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>

  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        list:[
          {"title":"宮保雞丁","checked":false},
          {"title":"魚香肉絲","checked":false},
          {"title":"水煮肉片","checked":false},
          {"title":"辣條辣條","checked":false},
        ]
      }
    },
    methods:{
      delE(key){
        this.list.splice(key,1)
      },
      addE(){
        this.list.unshift({
          "title":this.$refs.add.value,
          "checked":false
        })
      }
    }
  }
</script>

演示：

1.初始化

2.選擇菜品

3.刪除菜品

4.添加菜品

 

 

要求：

在原基礎上，實現 在添加菜名時輸入完畢后按回車鍵進行添加，而不是點擊按鈕，並且添加完后輸入框置空。

通過geikeydown來綁定點擊事件，傳遞事件對象來實現

<template>
  <div>
    <input type="text" ref="add" @keydown="addE($event)">
    <button @click="addE($event)">增加菜名</button>
    <hr />
    <h2>當前菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>
    <hr />
    <h2>已選菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="item.checked">
        <input type="checkbox" v-model="item.checked">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>

  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        list:[
          {"title":"宮保雞丁","checked":false},
          {"title":"魚香肉絲","checked":false},
          {"title":"水煮肉片","checked":false},
          {"title":"辣條辣條","checked":false},
        ]
      }
    },
    methods:{
      delE(key){
        this.list.splice(key,1)
      },
      addE(e){
        if(e.keyCode === 13){
        this.list.unshift({
          "title":this.$refs.add.value,
          "checked":false
        });
        this.$refs.add.value = "";
        }
      }
    }
  }
</script>

 

 

要求：

繼續進行優化，使得當前狀態保存到緩存中，再次刷新時還顯示當前狀態

知識：localStorage.setItem

<template>
  <div>
    <input type="text" ref="add" @keydown="addE($event)">
    <button @click="addE($event)">增加菜名</button>
    <hr />
    <h2>當前菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>
    <hr />
    <h2>已選菜名</h2>
    <ul>
      <li v-for="(item,key) in list" :key="key" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList">{{item.title}} - - -
        <button @click="delE(key)">刪除</button>
      </li>
    </ul>

  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        list:[
          {"title":"宮保雞丁","checked":false},
          {"title":"魚香肉絲","checked":false},
          {"title":"水煮肉片","checked":false},
          {"title":"辣條辣條","checked":false},
        ]
      }
    },
    methods:{
      delE(key){
        this.list.splice(key,1);

        // 緩存當前list到localStorage中，設置緩存名為list，添加刪除以及input框發生變化時都要進行緩存
        localStorage.setItem("list",JSON.stringify(this.list));
      },
      addE(e){
        if(e.keyCode === 13){
        this.list.unshift({
          "title":this.$refs.add.value,
          "checked":false
        });
        this.$refs.add.value = "";
        localStorage.setItem("list",JSON.stringify(this.list));
        }
      },
      saveList(){
        localStorage.setItem("list",JSON.stringify(this.list));
      }
    },
    mounted() {  /*生命周期函數   vue頁面刷新就會觸發的方法*/
      var list = JSON.parse(localStorage.getItem("list"));
      if(list){
        this.list = list;
      }
    }
  }
</script>