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的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue框架下引入ActiveX控件的问题解决

    最近参与了山东某一公司的呼叫中心系统的开发项目,我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能.从开始到结束所遇到的几个问题如下: 1.如何将ActiveX控件引入Vue,并且在页面上成功渲染: 2.如何调用ActiveX已提供的方法: 3.如何监听ActiveX的动作: (注:以上问题在html的文件里不存在) 我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染.如何将ActiveX控件渲染到页面上.根据客户开发人员提供的demo,`<objec

  • Vue动态控制input的disabled属性的方法

    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动态禁用控件绑定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 实现动态添加控件功能

    Angularjs 实现动态添加控件功能

    实现下面这样的需求: 点击增加一块数据盘,会出现数据盘选项. (1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素.但是突然发现控件里面的数据绑定,原生javascript没法控制. (2)上网查资料,找到$compile服务,动态改变html内容.本以为这可以解决我的需求,但是仔细研究发现$compile是这样的东西. 用$compile服务创建一个directive 'compile',这个complie会将传入的h

随机推荐