模拟组合框运行代码

 <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");