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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
推荐dojo学习笔记
2007/03/24 Javascript
xml转json的js代码
2012/08/28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
浅析Python数据处理
2018/05/02 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python实现udp聊天窗口
2020/03/31 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
应届生煤化工求职信
2013/10/21 职场文书
九年级家长会邀请函
2014/01/15 职场文书
培训自我鉴定
2014/01/31 职场文书
环保倡议书300字
2014/05/15 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Redis 异步机制
2022/05/15 Redis