Vue.js 实现职位选择功能：双向数据绑定与列表操作

<html>
   <head>
       <title>职位选择</title>
       <script src="vue.js"></script>
   </head>
   <body>
       <div id="app">
           可选职位                    已选职位<br>
         <select  v-model="job" multiple='true'> 
             <option v-for="jobvalue in joblist" :value="jobvalue">{{jobvalue}}</option><!--value不能为空-->
         </select>
         <button @click="right">>>></button>
         <button @click="left"><<<</button>
         <select  v-model="selectjob" multiple='multiple'> 
           <option v-for="lista in myjob" :value="lista">{{lista}}</option>
       </select>
       </div>
       <script type="text/javascript">
           new Vue({
               el:'#app',
               data:{
                  joblist:['前端工程师','Java程序员','软件测试师'],//可选职位列表
                  job:[],//可选职位选中的项
                  myjob:[],//已选职位列表
                  selectjob:[], //已选职位选中的项                  
               },
               methods:{
                   right:function(){
                    for(var i=0;i<this.job.length;i++){
                       this.myjob.push(this.job[i]);
                       var index=this.joblist.indexOf(this.job[i]);
                       this.joblist.splice(index,1);
                    }
                    this.job=[];
                   },
                   left:function(){
                       for(var i=0;i<this.selectjob.length;i++){
                         this.joblist.push(this.selectjob[i]);
                         var index=this.myjob.indexOf(this.selectjob[i]);
                         this.myjob.splice(index,1);
                       }
                       this.selectjob=[];
                   },
               }
           })
       </script>
   </body>
</html>