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动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JavaScript实现简单的计算器
Jan 16 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
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python字符串处理实现单词反转
2017/06/14 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python计算auc的方法
2020/09/09 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
自我鉴定怎么写
2014/01/12 职场文书
委托书的写法
2014/09/16 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
小学教师工作总结2015
2015/04/07 职场文书
前台岗位职责范本
2015/04/16 职场文书
村党组织公开承诺书
2015/04/30 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL