vue里input根據(jù)value改變背景色的實例
更新時間：2018年09月29日 11:41:56 作者：mNother
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、首先定義兩個不同的
.null-input .el-input__inner {
background-color: rgba(255, 255, 255, 0.8);
color: #525661;
font-size: 16px;
}
.no-null-input .el-input__inner {
background-color: rgba(255, 255, 255, 1);
color: #524F52;
font-size: 16px;
}
2、根據(jù):class 控制input的class
:class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" @change="changeCss"
3、根據(jù)change方法判斷input的值 然后控制isNullInput的值
changeCss(val) {
if (val === "") {
this.isNullInput = true;
} else {
this.isNullInput = false;
}
console.log(this.isNullInput);
}
但是關(guān)于placeholder顏色無法改變
網(wǎng)上的方法試了 沒有效果--網(wǎng)上方法：input::-webkit-input-placeholder
以上這篇vue里input根據(jù)value改變背景色的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實現(xiàn)常用的方法
表格常用功能經(jīng)常有字段篩選、更多字段篩選彈框來過濾出我們所需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實現(xiàn)常用的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
本篇文章主要介紹了vue 2.0 購物車小球拋物線的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案
在使用 elementui 表單的過程中,某些表單項需要通過 v-if 來判斷是否展示,但是這些表單項出現(xiàn)了檢驗失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案,感興趣的朋友一起看看吧2024-01-01
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會在子組件里面修改父組件傳進(jìn)來的值，但總有需要修改的時候，這篇文章主要介紹了vue中修改props傳進(jìn)來的值,需要的朋友可以參考下2022-12-12
el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁實現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁實現(xiàn)步驟,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用
這篇文章主要介紹了如何基于Electron和Vite快速構(gòu)建Vue3桌面應(yīng)用，本文主要技術(shù)棧就是Vue3、vite、Electron，文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04