要求：

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
        })}
      }
    }
  }
</script>