vue 实现input表单元素的disabled示例
场景
今天产品经理提了一个需求:
一个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示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍VUE实现表单元素双向绑定（总结），包括了VUE实现表单元素双向绑定（总结）的使用技巧和注意事项，需要的朋友参考一下 本文介绍了VUE实现表单元素双向绑定（总结） ，分享给大家，具体如下： checkbox最基本用法: 规则1：如果v-model绑定的变量类型为boolean，若input被选中，this.inputdata为true,否则this.inputdata为false。
-
本文向大家介绍AngularJS实现表单元素值绑定操作示例，包括了AngularJS实现表单元素值绑定操作示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS实现表单元素值绑定操作。分享给大家供大家参考，具体如下： ng-disabled:绑定控件的disabled属性 ng-show:显示或者隐藏元素：ms-visible ng-hide:和ng-show的功能恰好相反
-
本文向大家介绍Vue 表单控件绑定的实现示例，包括了Vue 表单控件绑定的实现示例的使用技巧和注意事项，需要的朋友参考一下 本文介绍了Vue 表单控件绑定的实现示例，感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入
-
<input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。 HTMLInputElement 的实例属性 特征属性 name：字符串，表示<input>节点的名称。该属性可读写。 type：字符串，表示<input>节点的类型。该属性可读写。 disabled：布尔值，表示<input>节点是否禁止使用。一旦被禁止使用，表单提交时不会包含该<input>节点。该属性可读
-
本文向大家介绍谈谈你对input元素中readonly和disabled属性的理解相关面试题，主要包含被问及谈谈你对input元素中readonly和disabled属性的理解时的应答技巧和注意事项，需要的朋友参考一下 相同点：都会使文本框变成只读，不可编辑。 不同点： 1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。 2.disab
-
本文向大家介绍Vue 处理表单input单行文本框的实例代码，包括了Vue 处理表单input单行文本框的实例代码的使用技巧和注意事项，需要的朋友参考一下 用vue监听单行文本框是最最最容易的事。 只需用到 v-model 就能监听。 在 data 里面创建一个 msg 变量，用来存储输入框的输入的内容。 在 input 用 v-model 绑定 msg 。 这时输入框输入的所有内容，都会实时更新