vue组件中点击按钮后修改输入框的状态实例代码


Posted in Javascript onApril 14, 2017

最近写一个这样的页面

vue组件中点击按钮后修改输入框的状态实例代码 

要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用

<el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}></el-input>
data(){
  return{
    isDisabled:true
  }
}

后来又想到使用jquery来改变属性,但是这个也没用

$(document).ready(function(){
 $('.submitButton').hide();
 $('.reviseButton').click(function () {
  $(this).hide();
  $('.submitButton').show();
  $('#username').attr("disabled",true);
  $('#qq').addAttr("disabled");
 })
 })

最后! 机智的我查看了网页,发现被禁用的输入框是有个is-disabled的类的,所以用jquery修改类即可

$(document).ready(function(){
 $('.submitButton').hide();
 $('.reviseButton').click(function () {
  $(this).hide();
  $('.submitButton').show();
  $('#usernames').removeClass("is-disabled");
   $('#qq').addClass("is-disabled");
 })
 })
Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
angularjs实现首页轮播图效果
Apr 14 #Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 #Javascript
微信小程序 下拉菜单简单实例
Apr 13 #Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python中正则表达式详解
2017/05/17 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python实现最大优先队列
2019/08/29 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
大客户销售经理职责
2013/12/04 职场文书
演讲稿开场白
2014/01/13 职场文书
活动策划求职信模板
2014/04/21 职场文书
根叔历年演讲稿
2014/05/20 职场文书
个人自荐材料
2014/05/23 职场文书
汽修专业自荐信
2014/07/07 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
公务员政审材料范文
2014/12/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL