vue之選單新增選擇,知識:資料雙向繫結、迴圈渲染、事件點選以及按鍵的點選
阿新 • • 發佈:2018-12-19
要求:
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>