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的siblings效果的js代码
Aug 09 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
JS手写一个自定义Promise操作示例
Mar 16 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 和 MySQL 基础教程(四)
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
一段实时更新的时间代码
2006/07/07 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
详解angular element()方法使用
2017/04/08 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python判断变量名是否合法的方法示例
2019/01/28 Python
如何通过python检查文件是否被占用
2020/12/18 Python
学生自我鉴定范文
2013/10/04 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
办公室岗位职责
2014/02/12 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
2014年党支部承诺书
2014/05/30 职场文书
甘南现象心得体会
2014/09/11 职场文书
会议接待欢迎标语
2014/10/08 职场文书
英文感谢信范文
2015/01/21 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS