Vue動(dòng)態(tài)綁定class、style、background的方式
更新時(shí)間：2025年01月16日 09:02:19 作者：小叮當(dāng)口袋
文章主要介紹了在Vue.js中如何使用動(dòng)態(tài)綁定class、style和background來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式和背景圖的設(shè)置,通過(guò)v-bind指令,可以靈活地根據(jù)數(shù)據(jù)變化來(lái)動(dòng)態(tài)更新元素的樣式和背景
Vue動(dòng)態(tài)綁定class、style、background
動(dòng)態(tài)綁定class
:class=" currentIndex == 1 ? 'selected' : ' ' " :class=" currentIndex ? 'selected' : ' ' "
動(dòng)態(tài)綁定style
動(dòng)態(tài)樣式判斷
:style="{color:active==true?'#FFFFFF':'#333333'}"動(dòng)態(tài)綁定background背景圖
:style="{ backgroundImage: 'url(' + backgroundImage + ')' }"Vue動(dòng)態(tài)綁定多個(gè)class
非動(dòng)態(tài)樣式與動(dòng)態(tài)樣式一起綁定
animate__animated是使用Animate動(dòng)畫必須要帶的值，用字符串即可。
后面的animate__shakeX用對(duì)象包裹，動(dòng)態(tài)給布爾值。
<el-tag
type="success"
effect="dark"
@click="flag = !flag"
:class="['animate__animated', { animate__shakeX: flag }]"
>點(diǎn)我晃動(dòng)</el-tag
>data() {
return {
flag: true,
};
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+swiper實(shí)現(xiàn)組件化開(kāi)發(fā)的實(shí)例代碼
這篇文章主要介紹了vue+swiper實(shí)現(xiàn)組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2017-10-10
使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定(面試常見(jiàn))
這篇文章主要介紹了使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定，在前端面試過(guò)程中經(jīng)常會(huì)問(wèn)到，文中主要實(shí)現(xiàn)v-model，v-bind 和v-click三個(gè)命令，其他命令也可以自行補(bǔ)充。需要的朋友可以參考下2018-04-04
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
前端開(kāi)發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)及 Springsecurity 按鈕級(jí)別的權(quán)限控制
這篇文章主要介紹了Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)以及 Springsecurity 按鈕級(jí)別的權(quán)限控制的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了vant樣式不生效問(wèn)題的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽(tīng)div寬度的變化
這篇文章主要介紹了vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽(tīng)某個(gè)div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08