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 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
关于js datetime的那点事
Nov 15 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
取得传值的函数
2006/10/27 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python实现合并两个数组的方法
2015/05/16 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
医学生自荐信
2013/12/03 职场文书
党日活动总结
2014/05/07 职场文书
安全目标责任书
2014/07/22 职场文书
2015年防汛工作总结
2015/05/15 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers