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 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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中动态HTML的输出技术
2006/10/09 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
javaScript基础详解
2017/01/19 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python操作gitlab API过程解析
2019/12/27 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
python如何修改文件时间属性
2021/02/05 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
即兴演讲稿
2014/01/04 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书