vue动态禁用控件绑定disable的例子


Posted in Javascript onOctober 28, 2019

场景

报修范围取值不同时 ,区域有时需要禁用

代码

<el-form-item label="报修范围" prop="applicationRange" >

<el-select v-model="addInfo.applicationRange" placeholder="请选择报修范围" style="width: 200px" @change="inputToDisabled" >

  <el-option v-for="item in applicationRangeList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>

</el-select>

</el-form-item>
<el-form-item label="区域" prop="areaCodeAdd">

<el-select v-model="addInfo.areaCodeAdd" placeholder="请选择区域" v-on:change="getBuildListAdd" style="width: 220px" :disabled="isAble" >

<el-option

v-for="item in areaListAdd"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>
methods:{

 inputToDisabled (){

   if (this.addInfo.applicationRange === '1002') {

       this.isAble = true; // 注意true是不可用

    } else{

       this.isAble = false; //可用

    }

  },

}

以上这篇vue动态禁用控件绑定disable的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
js仿360开机效果
Dec 26 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
关于vue组件事件属性穿透详解
Oct 28 #Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 #Javascript
vue h5移动端禁止缩放代码
Oct 28 #Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 #Javascript
element-ui 本地化使用教程详解
Oct 28 #Javascript
vue 全局环境切换问题
Oct 27 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php实现字符串翻转的方法
2015/03/27 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python3.4实现邮件发送功能
2018/05/28 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python、Matlab求定积分的实现
2019/11/20 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
八一建军节慰问信
2015/02/14 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python