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

转载于:https://www.cnblogs.com/lvxisha/p/10779664.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值