你如城市与省份间的二级联动效果
- <!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
来源: http://www.bubuko.com/infodetail-3038280.html