vue省市区三级联动

<div id="app1">
            <select v-model="selected"  >
           
                <option v-for="option in options"> {{option.text}} </option>
            </select> 
         
            <select v-model="selecteds" > 
            
                <option v-for="v in list">{{v.text}} </option>
            </select>
              <select v-model="selectedss"> 
               
                <option v-for="n in lists">{{n.text}} </option>
            </select>
             </div>
<script>
 new Vue({
    el: '#app1',
    data: {
       selected:'浙江',
	    selecteds:'杭州',
		selectedss:'西湖区',
	   
	 options: [
         { text: '浙江', value: [{text:'杭州',value:[ {text:'西湖区'},{text:'余杭区'},{text:'拱墅区'}]},{text:'宁波'},{text:'温州'},{text:'台州'},{text:'绍兴'}]},
         { text: '江西'},
         { text: '福建'},
       ]
    },
  
    computed: {
        list: function () {
            for(var i in this.options){
                // console.log(this.options[i].text)
                if(this.options[i].text == this.selected){
                    console.log(this.options[i].value)
                    return this.options[i].value
                }
				
            }
	   
        },
		 lists: function () {
            for(var i in this.list){
               
                if(this.list[i].text==this.selecteds){
                  
                    return this.list[i].value
                }
				
				
            }
	   
        }
    }
  })

</script>
相关文章
相关标签/搜索