vue 下拉框多选

vue 下拉框多选_第1张图片

在这里插入代码片<!DOCTYPE html>

<head>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

</head>
<body >
  <div id="app" class="container-fluid">{{id}}
      <div style="width: 200px;">
			  <v-select :placeholder="placeholder"
			             multiple 
			             :options="zs"
			             
						   label="text"
			             @input="afn"
			             ></v-select>
	  </div>
		  <!-- 
		  :options="zs"  自己要显示的数据
		  label="text"   自己显示数据的字段
		  @input="afn"  自己获取数据前台点击的数据的方法 
		  
		  
		  -->
   
 
    <div id="value">{{ids}}</div>  
  </div>
</body>
<script>
   Vue.component('v-select', VueSelect.VueSelect);
 
   new Vue({
      el: '#app',
      data: {
         zs: [
            {"id": "1", "text": "联想"},
            {"id": "2", "text":"华为"},
            {"id": "3", "text": "中兴"},
          ],
          placeholder: '选择一个规格品牌',
          ids: [],
         
		
        
      },
   
     methods:{
       afn: function(values){
		   /* 查出id*/
         this.ids =values.map(function(obj){
           return  	obj/*obj.id+obj.text
			
			自己后台要接收的数据
			"{" +obj.id+","+obj.text +"}"
			
			*/
         })
       }
			
			
		
	   					 
	   				
	   					 
	  
     }
    });
</script>
</html>

你可能感兴趣的:(电商上,java)