vue 實(shí)現(xiàn)input表單元素的disabled示例
場景
今天產(chǎn)品經(jīng)理提了一個需求:
一個API的賬號體系增加一個checkbox控制API輸出字段,但是有三個是偽控制,事實(shí)上是接口里面寫死的,
所以是必須選中的
分析
重點(diǎn)是怎么在Vue組件中實(shí)現(xiàn) checkbox的disabled, 哈 這個肯定是需要使用元素綁定的
Vue做這個操作可以實(shí)現(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 實(shí)現(xiàn)input表單元素的disabled示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁切換時記錄之前選中的狀態(tài)
這篇文章主要介紹了關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁切換時記錄之前選中的狀態(tài),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符
這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過監(jiān)聽表單輸入的內(nèi)容,使用方法的缺陷,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件方式
這篇文章主要介紹了vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06vue-cli3項(xiàng)目打包后自動化部署到服務(wù)器的方法
這篇文章主要介紹了vue-cli3項(xiàng)目打包后自動化部署到服務(wù)器的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解
在移動應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下2024-07-07vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11