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 相关文章推荐
Cookie 小记
Apr 01 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery选择器基础入门教程
May 10 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
基于vue.js实现购物车
Jan 15 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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中的foreach函数
2013/08/31 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php实现网页端验证码功能
2017/07/11 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript中AJAX用法实例分析
2015/01/30 Javascript
js获取页面description的方法
2015/05/21 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python 判断自定义对象类型
2009/03/21 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
详解python中的json和字典dict
2018/06/22 Python
Python Pandas 箱线图的实现
2019/07/23 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
大家访活动实施方案
2014/03/10 职场文书
老公保证书范文
2014/04/29 职场文书
和睦家庭事迹
2014/05/14 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android