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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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中如何调用webservice的实例参考
2013/04/25 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python Celery多队列配置代码实例
2019/11/22 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
增大python字体的方法步骤
2020/07/05 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
项目资料员岗位职责
2013/12/10 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
毕业生见习报告总结
2014/11/08 职场文书
教师业务学习材料
2014/12/16 职场文书
网络营销实训总结
2015/08/03 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle