vue组件中点击按钮后修改输入框的状态实例代码
2017-04-14 08:44
1191 查看
最近写一个这样的页面
要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了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"); }) })
您可能感兴趣的文章:
- vue组件 $children,$refs,$parent的使用详解
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- Vue组件tree实现树形菜单
- Vue组件之全局组件与局部组件的使用详解
- 详解利用jsx写vue组件的方法示例
- 在vue组件中使用axios的方法
- vue组件如何被其他项目引用
- vue组件实现文字居中对齐的方法
- Vue组件选项props实例详解
- vue组件中使用iframe元素的示例代码
- 使用Vue组件实现一个简单弹窗效果
- 详解vue组件通信的三种方式
- 在Vue组件上动态添加和删除属性方法
- 通过npm引用的vue组件使用详解
- vue组件实现可搜索下拉框扩展
- Vue组件通信之Bus的具体使用
- Vue组件BootPage实现简单的分页功能
- 从零开始封装自己的自定义Vue组件
相关文章推荐
- vue组件中点击按钮后修改输入框的状态
- Vue.js 点击按钮显示/隐藏内容的实例代码
- Jquery实现点击按钮,连续地向textarea中添加值的实例代码
- AngularJS 实现点击按钮获取验证码功能实例代码
- vue.js模仿京东省市区三级联动的选择组件实例代码
- Vue.js实现输入框绑定的实例代码
- 用户找回密码功能JS验证邮箱通过点击下一步隐藏邮箱输入框并修改下一步按钮的ID
- Vue.js上下滚动加载组件的实例代码
- Vue.js 点击按钮显示/隐藏内容 实例
- vue与leaflet的结合使用,在popup上放置一个按钮,点击后使用amout挂载一个未挂载的实例,显示一些信息
- 在input输入框中回车激活点击按钮事件代码
- vue.js实现仿原生ios时间选择组件实例代码
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- tips: 每次eclipse里面修改了Java代码后点击运行按钮,BlackBerry模拟器每次都需要重新启动,为什么啊?怎么解决?
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
- 使用vue实现点击按钮滑出面板的实现代码
- IOS点击按钮隐藏状态栏详解及实例代码
- iview给radio按钮组件加点击事件的实例
- Vue组件实例间的直接访问实现代码