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