vue中动态绑定表单元素的属性方法


Posted in Javascript onFebruary 23, 2018

在vue中有时候可能想像使用jq一样给某个元素添加属性,如

$('#select1').attr('disabled','disabled')

这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq

使用vue的方法来添加属性可以这样:

<select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'>
 <option></option>
</selected>

disabled是表单元素的原生属性,可以直接使用属性绑定的语法 :disabled 来绑定,然后加上一个条件就可以控制这个属性动态添加删除,如:

watch:{
 issueDatas(){
  if(this.issueDatas.state==5){
   this.isDisabled=true;
  }
 }
}

当状态为5的时候就能让select为只读状态

以上这篇vue中动态绑定表单元素的属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
vue增删改查的简单操作
Jul 15 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 #Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 #Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 #Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 #Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 #Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
thinkphp 多表 事务详解
2013/06/17 PHP
php根据年月获取季度的方法
2014/03/31 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
php解决安全问题的方法实例
2019/09/19 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
PyQt5组件读取参数的实例
2019/06/25 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
高级销售求职信
2014/02/21 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
代收款委托书范本
2014/10/01 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
python神经网络ResNet50模型
2022/05/06 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android