vue里input根據(jù)value改變背景色的實(shí)例
更新時(shí)間：2018年09月29日 11:41:56 作者：mNother
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
1、首先定義兩個(gè)不同的
.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改變背景色的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實(shí)現(xiàn)動(dòng)態(tài)加載,同時(shí),Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07
Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
下面小編就為大家介紹一下vue 自定義全局方法,在組件里面的使用。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
最近項(xiàng)目里集成了百度地圖的一些功能,所以下面這篇文章主要給大家介紹了關(guān)于前端小技能之Vue集成百度離線地圖功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue shopCart 組件開發(fā)詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)
這篇文章主要介紹了詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
在Uniapp中使用web-view組件來加載H5頁面時(shí),對(duì)于后退鍵的處理是一個(gè)常見需求,下面這篇文章主要給大家介紹了關(guān)于Uniapp中WebView的使用與后退鍵處理的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04