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设置css属性的代码
Dec 28 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
如何制作自己的原生JavaScript路由
May 05 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
PHP 变量类型的强制转换
2009/10/23 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python延时操作实现方法示例
2018/08/14 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
开业典礼主持词
2014/03/21 职场文书
实践单位评语
2014/04/26 职场文书
节能宣传周活动总结
2014/05/08 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
先进教师个人事迹材料
2014/12/15 职场文书