vue实现二级联动效果

你如城市与省份间的二级联动效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style type="text/css">
		.pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}
	</style>
</head>
<body>
<div id="app">
	<div class="inputLine">
          <span>所在区域</span>
          <select name="" v-model="countryName" @change="selectCountry">
            <option :value="item" v-for="(item,index) in area">
              {{item.country}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
          <select name="" v-model="cityName">
            <option :value="item" v-for="(item,index) in countryName.city">
              {{item}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
        </div>
</div>
<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-resource.min.js"></script>
<script>
	new Vue({
		el:'#app',
		data:{
			list:[
				{
		          text: '这是第1条数据'
		        }
			],
			UniversityList:[],
        	schoolList:[],
        	countryName:{},
	        cityName:"请选择城市",
	        area:[
	          {
	            "country":"美国",
	            "city":[
	              "纽约",
	              "洛杉矶",
	              "旧金山",
	              "西雅图",
	              "波士顿",
	              "休斯顿",
	              "圣地亚哥",
	              "芝加哥",
	              "其它",
	            ]
	          },
	          {
	            "country":"加拿大",
	            "city":[
	              "温哥华",
	              "多伦多",
	              "蒙特利尔",
	              "其它"
	            ]
	          },
	          {
	            "country":"澳大利亚",
	            "city":[
	              "悉尼",
	              "墨尔本",
	              "其它"
	            ]
	          },
	          {
	            "country":"新加坡",
	            "city":[
	              "新加坡"
	            ]
	          },
	         
	        ],
		},
		
		methods:{
		      selectCountry(value){
		        this.cityName=this.countryName.city[0];
		      },
			}
		})
</script>
</body>
</html>

　　http://www.cnblogs.com/beileixinqing/p/8252153.html

posted on 2019-04-27 18:23  婧星  阅读(6963)  评论(0)  编辑  收藏  举报

导航