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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
岗位职责的含义
2013/11/17 职场文书
团组织关系介绍信
2014/01/12 职场文书
教师职位说明书
2014/07/29 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
python glom模块的使用简介
2021/04/13 Python
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python