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中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
js实现水平滚动菜单导航
Jul 21 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
使用typescript快速开发一个cli的实现示例
Dec 09 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 str_pad 函数使用详解
2009/01/13 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php生成RSS订阅的方法
2015/02/13 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php实现简单四则运算器
2020/11/29 PHP
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python之os操作方法(详解)
2017/06/15 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python通过len函数返回对象长度
2020/10/22 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
领导班子四风表现材料
2014/08/23 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android