Vue配合iView实现省市二级联动的示例代码


Posted in Javascript onJuly 27, 2018

在实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断

iView中的on-change事件

on-change事件:即选中的Option变化时触发,默认返回 value。(value在这里只支持String和Number类型)

1、html部分

<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
    <FormItem prop="province" label="省份">
       <Select v-model="formValidate.province" placeholder="请选择城市" @on-change="change">
        <Option v-for="item in provinceArr" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
    </FormItem>
    <FormItem prop="city" label="城市">
       <Select v-model="formValidate.city" placeholder="请选择省份">
         <Option v-for="item in cities" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
     </FormItem>
   </Form>
</template>

2、JS主要部分

<script>
  export default{
    data(){
      return {
        provinceArr: [
          {
            id:1,
            name:"北京市",
            cities:[{id:11,
                name:"北京市"}]
          },
          {
            id:2,
            name:"天津市",
            cities:[{id:12,
                name:"天津市"} ]
          },
          {
            id:3,
            name:"上海市",
            cities:[ {id:13,
                name:"上海市"} ]
          }
        ],
        cities: "",
        formValidate:...,
        ruleValidate:...
      }
    },
    methods:{
      change(val){
       for(var i=0; i<this.provinceArr.length; i++){
        if(val == this.provinceArr[i].id ){
         this.cities = this.provinceArr[i].cities;
        }
       }
      }
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
jquery实现数字输入框
Feb 22 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
react native 文字轮播的实现示例
Jul 27 #Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
You might like
php页面缓存ob系列函数介绍
2012/10/18 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python 实现两个线程交替执行
2020/05/02 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python如何实现的二分查找算法
2020/05/27 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
EJB实例的生命周期
2016/10/28 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
圣诞节红领巾广播稿
2014/02/03 职场文书
迎新生晚会主持词
2015/06/30 职场文书