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

时间：2021-05-22 08:41:57|栏目：vue|点击：次

场景

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

一个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;
   },

上一篇：Vue3.0的优化总结

栏目：vue

下一篇：vue获取form表单的值示例

本文标题：vue 实现input表单元素的disabled示例

本文地址：http://www.codeinn.net/misctech/126642.html

更多vue

vue

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

阅读排行

推荐教程