vue 实现input表单元素的disabled示例


Posted in Javascript onOctober 28, 2019

场景

今天产品经理提了一个需求:

一个API的账号体系增加一个checkbox控制API输出字段,但是有三个是伪控制,事实上是接口里面写死的,

所以是必须选中的

分析

重点是怎么在Vue组件中实现 checkbox的disabled, 哈 这个肯定是需要使用元素绑定的

Vue做这个操作可以实现disabled input元素的传递, 这个就很秒了

解决

<input type="checkbox" :disabled="" >

具体解决方案如下

<div class="checkbox">
     <label class="checkbox-inline" v-for="show_field in form_params.export_fields">
      <input type="checkbox" :disabled="isDefault(show_field.value)" v-model="form_params.field" :value="show_field.value">{{ show_field.name }}
     </label>
    </div>
// 是否是默认展示的字段
   isDefault : function(field){
    return jQuery.inArray(field, ['x', 'y', 'z']) !== -1;
   },

以上这篇vue 实现input表单元素的disabled示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于javascript滚动图片具体实现
Nov 18 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
VUE解决 v-html不能触发点击事件的问题
Oct 28 #Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 #Javascript
vue动态禁用控件绑定disable的例子
Oct 28 #Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
关于vue组件事件属性穿透详解
Oct 28 #Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php的XML文件解释类应用实例
2014/09/22 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python类class参数self原理解析
2020/11/19 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
给分销商的致歉信
2014/01/14 职场文书
初三学习计划书范文
2014/04/30 职场文书
公司任命书范本
2014/06/04 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
大学生读书笔记大全
2015/07/01 职场文书
创业计划书之家政服务
2019/09/18 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS