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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
使用Vue生成动态表单
Nov 26 Javascript
JS array数组检测方式解析
May 19 Javascript
js实现翻牌小游戏
Jul 31 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
大学生就业推荐信范文
2013/11/29 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
师范生自我鉴定
2014/03/20 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP