vue动态禁用控件绑定disable的例子
场景
报修范围取值不同时 ,区域有时需要禁用
代码
<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的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue动态控制input的disabled属性的方法
有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页
-
Vue input控件通过value绑定动态属性及修饰符的方法
对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check
-
Vue框架下引入ActiveX控件的问题解决
最近参与了山东某一公司的呼叫中心系统的开发项目,我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能.从开始到结束所遇到的几个问题如下: 1.如何将ActiveX控件引入Vue,并且在页面上成功渲染: 2.如何调用ActiveX已提供的方法: 3.如何监听ActiveX的动作: (注:以上问题在html的文件里不存在) 我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染.如何将ActiveX控件渲染到页面上.根据客户开发人员提供的demo,`<objec
-
vue动态禁用控件绑定disable的例子
场景 报修范围取值不同时 ,区域有时需要禁用 代码 <el-form-item label="报修范围" prop="applicationRange" > <el-select v-model="addInfo.applicationRange" placeholder="请选择报修范围" style="width: 200px" @change="inputToDisable
-
Vue 表单控件绑定的实现示例
本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text&qu
-
Vue表单控件绑定图文详解
Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现. 1.基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. 2.Checkbox 单个勾选框,逻辑值: 3.多个勾选框,绑定到同一个数组: 4.动态选项,用 v-for 渲染: 5.值绑定 对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑
-
学习vue.js表单控件绑定操作
本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->
-
Vue.js事件处理器与表单控件绑定详解
事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&
-
vue指令之表单控件绑定v-model v-model与v-bind结合使用
一.表单控件绑定v-model v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. ① 单行文本框 input[type="text"] .多行文本框 textarea: v-model值绑定到value属性: <body> <div id="app"> <input type="text" v-model=&quo
-
Vue表单控件数据绑定方法详解
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value.checked.selected特性的初始值.因为它会选择Vue实例数据来作为具体的值.应该通过JS组件的data选项中声明初始值 type:text <div id="example"> <input v-model="
-
.Net使用XtraGrid控件绑定数据
目录 设计数据源并绑定字段: 表格数据与数据源的数据同步 新增一条记录,添加行 删除选中行 获取选定行,指定列单元格的内容 Get/Set 单元格的值 选中行改变绑定行数据到对应控件中 1.判断是否有Focused行 2.获取Focused行 3.获取Focused行单元格的值 动态添加列 添加非绑定列 编辑器 添加按钮列 数据验证 1.使用RepositoryItem.Validating事件 2.使用 GridView.ValidatingEditor 事件 3.使用 GridView.Va
-
MFC中动态创建控件以及事件响应实现方法
本文实例讲述了MFC中动态创建控件以及事件响应实现方法,分享给大家供大家参考.具体实现方法如下: 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个容器,一般是对话框,这时我们在对话框编辑窗口中,从工具窗口中拖出所需控件放在对话框中即可,再适当修改控件ID,设置控件属性,一个静态控件就创建好了,当对话框被显示时,其上的控件也会显示. 静态控件不需要调用Create()
-
Angularjs 实现动态添加控件功能
实现下面这样的需求: 点击增加一块数据盘,会出现数据盘选项. (1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素.但是突然发现控件里面的数据绑定,原生javascript没法控制. (2)上网查资料,找到$compile服务,动态改变html内容.本以为这可以解决我的需求,但是仔细研究发现$compile是这样的东西. 用$compile服务创建一个directive 'compile',这个complie会将传入的h
随机推荐
- winserver 2012R2 安装oracle及创建表流程(推荐)
- 试用php中oci8扩展
- python协程用法实例分析
- c语言main函数使用及其参数介绍
- MySQL优化之连接优化
- 新浪微博OAuth认证和储存的主要过程详解
- Python素数检测的方法
- 详解vue.js之绑定class和style的示例代码
- MySQL验证用户权限的方法
- Java加密解密工具(适用于JavaSE/JavaEE/Android)
- 深入了解路由器
- php解析xml方法实例详解
- Python基于有道实现英汉字典功能
- Android 程序应用的生命周期
- Android应用创建多个快捷方式
- 打开儿童右脑的途径与方法
- 找出元凶 Windows关机慢最新原因
- 利用Kotlin Tools如何快速添加Kotlin依赖详解
- 使用IDEA编写jsp时EL表达式不起作用的问题及解决方法
- Android基于IJKPlayer视频播放器简单封装设计