<div class="app">
<div class="text">
<div><input type="text" v-model="text" autofocus @keyup.enter="add"></div>
<div>
<select multiple size="10" v-model="selectedList">
<template v-for="(item,index) in list">
<option>{{item}}</option>
</template>
</select>
</div>
</div>
<div class="button">
<button @click="add">添加</button>
<button @click="deletes">删除</button>
<button @click="clear">清除</button>
</div>
</div>
js代码如下:
let vm=new Vue({
data:{
text:"",
selectedList:[],
list:[]
},
methods:{
add(){
this.list.push(this.text);
this.text="";
this.$el.querySelector("input[type=text]").focus();
},
deletes(){
this.selectedList.forEach(item=>{
let index=this.list.indexOf(item);
this.list.splice(index,1);
})
},
clear(){
let isOk=window.confirm("您确定清除吗");
if(isOk){
this.list=[];
this.$el.querySelector("input[type=text]").focus();
}
}
}
}).$mount("#app");