vue 實現(xiàn)input表單元素的disabled示例
更新時間：2019年10月28日 10:34:16 作者：cominglately
今天小編就為大家分享一篇vue 實現(xiàn)input表單元素的disabled示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
場景
今天產(chǎn)品經(jīng)理提了一個需求:
一個API的賬號體系增加一個checkbox控制API輸出字段,但是有三個是偽控制，事實上是接口里面寫死的，
所以是必須選中的
分析
重點是怎么在Vue組件中實現(xiàn) checkbox的disabled, 哈 這個肯定是需要使用元素綁定的
Vue做這個操作可以實現(xiàn)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>
// 是否是默認(rèn)展示的字段
isDefault : function(field){
return jQuery.inArray(field, ['x', 'y', 'z']) !== -1;
},
以上這篇vue 實現(xiàn)input表單元素的disabled示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色
本文主要介紹了Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue使用echarts時created里拿到的數(shù)據(jù)無法渲染的解決
這篇文章主要介紹了vue使用echarts時created里拿到的數(shù)據(jù)無法渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue中axios的get請求和post請求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求,post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn),然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請求和post請求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue中$refs的用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于vue項目中向數(shù)組添加元素的3種方式,在Vue中添加元素到數(shù)組非常簡單,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue對象的基本組成和Vue對象掛載的幾種方式,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法
今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
layer.js(mobile)是一個小巧方便的彈出層插件，在之前的apicloud項目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06