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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
详解JavaScript树结构
Jan 09 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php微信开发之关注事件
2018/06/14 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JS event使用方法详解
2008/04/28 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python 如何提高元组的可读性
2019/08/26 Python
python实现串口通信的示例代码
2020/02/10 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
python包的导入方式总结
2021/03/02 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
小学生个人先进事迹材料
2014/05/08 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
5个实用的JavaScript新特性
2022/06/16 Javascript