基于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的事件描述
Sep 08 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
详解angular element()方法使用
2017/04/08 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
心理健康教育心得体会
2013/12/29 职场文书
好人好事事迹材料
2014/02/12 职场文书
网络宣传方案
2014/03/15 职场文书
放飞理想演讲稿
2014/09/09 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
技能培训通讯稿
2015/07/18 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
SQL中的三种去重方法小结
2021/11/01 SQL Server