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