基于IView中on-change属性的使用详解


Posted in Javascript onMarch 15, 2018

本人android开发出身,因工作需要,后台前端的代码也都有涉猎,这两天一直被input标签中的onchange困扰的头昏脑胀,辗转难眠,废话不多说,下面说下遇到的问题和解决办法。

问题产生

之前跟同事刚研究了vue这个牛逼的框架,实现的是省市级三级联动的小功能,部分代码如下:

<Form-item label="所在地区" >
   <Row >
   <Col span="12">
   <select v-model="f.p" @change="selpro" placeholder="sheng">
    <option :value="i" v-for="(v,i) in pro">{{v.name}}</option>
   </select>
   </Col>
   <Col span="12">
   <select v-model="f.c" @change="selcity" placeholder="shi">
    <option :value="i" v-for="(v,i) in city">{{v.name}}</option>
   </select>
   </Col>
   <Col span="12">
   <select v-model="f.cc" v-show="county.length>0" @change="result" placeholder="xian"> 
    <option :value="i" v-for="(v,i) in county">{{v.name}}</option>
   </select>
   </Col>
   </Row>
  </Form-item>

前端界面用vue写完后,在前后端代码合并到同一个项目下时,因为js、html代码规范与vue的不一致,造成各种各样的问题,例如onchange=“”,@change=“”在iview中就不起作用,最终经过google这个强大的搜索引擎,把问题解决了,

解决问题

在iview中正确的写法应是:@on-change

<Form-item label="所在地区">
    <Row>
     <i-col span="12">
      <i-select v-model="f.p" @on-change="selpro" placeholder="sheng">
       <i-option :value="i" v-for="(v,i) in pro" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
     <i-col span="12">
      <i-select v-model="f.c" @on-change="selcity" placeholder="shi">
       <i-option :value="i" v-for="(v,i) in city" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
     <i-col span="12">
      <i-select v-model="f.cc" v-show="county.length>0" onchange="result" placeholder="xian">
       <i-option :value="i" v-for="(v,i) in county" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
    </Row>
   </Form-item>

以上这篇基于IView中on-change属性的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
JavaScript Promise启示录
Aug 12 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 #Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 #Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 #Javascript
微信小程序实现换肤功能
Mar 14 #Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 #Javascript
iview table高度动态设置方法
Mar 14 #Javascript
vue2.0安装style/css loader的方法
Mar 14 #Javascript
You might like
php SQL之where语句生成器
2009/03/24 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
详解python中的线程
2018/02/10 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python实现剪切功能
2019/01/23 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
高三自我鉴定范文
2013/10/19 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
音乐教学案例
2014/01/30 职场文书
租房协议书怎么写
2014/04/10 职场文书
小学生倡议书范文
2014/05/13 职场文书
绿色出行口号
2014/06/18 职场文书
户籍证明模板
2014/09/28 职场文书
初中英语教学随笔
2015/08/15 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
MySQL transaction事务安全示例讲解
2022/06/21 MySQL