vue元素樣式實現(xiàn)動態(tài)改變方法介紹
1 前言
在vue
項目中,很多場景要求我們動態(tài)改變元素的樣式,比如按鈕由不可點擊到可以點擊樣式改變,這種情況下,我們通常根據(jù)vue
框架提供的動態(tài)綁定v-bind
來操作元素的class列表賀內(nèi)聯(lián)樣式來達(dá)到動態(tài)設(shè)置元素樣式的效果;
2 動態(tài)改變樣式的方法
2.1 操作元素class列表
我們通過vue內(nèi)置的:class
(v-bind:class
)來動態(tài)操作元素的class;如下所示:
<div :class="{ class-a: isActive }"></div> <script> data() { return { isActive: true } } <script> <style scoped> .class-a { ... } </style>
其中class-a
代表樣式表style中的一個樣式對象,isActive
時控制樣式是否生效的變量,若isActive
為true,則代表class-a
樣式生效,此時class-a
回家加載到div元素的樣式列表中,isActive
為false則不生效,不會將class加載到div元素額樣式列表中。
我們用實例來演示一下,實例實現(xiàn)的效果時效果圖如下:
實例代碼如下:
<template> <div :class="{ 'dark-theme': isActive }"> <title-bar :title="title" @goBack="goback"></title-bar> <div> <div class="sty-item"> <label>改變頁面主題色:</label> <TButton @clickhandle="changeTheme" /> </div> </div> </div> </template> <script> import TitleBar from "@/components/TitleBar"; import TButton from "@/components/TButton"; export default { name: "", // 動態(tài)控制vue 頁面元素樣式 components: { TitleBar, TButton }, data() { return { isActive: false, // class是否生效 title: "動態(tài)樣式", }; }, methods: { changeTheme() { if (this.isActive) { this.isActive = false; } else { this.isActive = true; } }, goback() { // } } }; </script> <style lang="scss" scoped> .page-body1 { background-color: rgb(21, 126, 29); margin: 10px 15px; } .dark-theme { background-color: rgb(41, 46, 42); color: azure; } </style>
除此之外,還可以直接使用對象變量來控制class的變化,并且使用動態(tài)class同時,也能同時設(shè)置普通楊式,代碼如下所示:
<div class="static" :class="classObj" ></div> <script> data() { return { classObj: { 'class-a': true, 'class-b': false } } } <script> <style scoped> .static { ... } .class-a { ... } .class-b { ... } </style>
以上代碼最后作用于div上的class列表為:[static,class-a]
2.2 操作元素內(nèi)聯(lián)樣式
與上面操作元素class列表原利相同,我們通過vue內(nèi)置的:style
(v-bind:style
)來動態(tài)操作元素的內(nèi)聯(lián)樣式;和class不同的是,內(nèi)聯(lián)樣式本身就是一個對象,這就意味著style可以更為靈活的變化,如下所示:
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <script> data() { return { activeColor: 'red', fontSize: 30 } } <script>
也可以寫作對象形式,以上代碼等同于:
<div :style="styleObject"></div> <script> data() { return { styleObject: { activeColor: 'red', fontSize: 30 } } } <script>
我們用實例來演示一下,實例實現(xiàn)的效果時效果圖如下:
實例代碼如下:
<template> <div> <title-bar :title="title" @goBack="goback"></title-bar> <div> <div class="sty-item"> <label>改變按鈕樣式:</label> <button class="btn" :style="dynamicStyle" @click="btnColorChange"> 我是按鈕 </button> </div> </div> </div> </template> <script> import TitleBar from "@/components/TitleBar"; export default { name: "", // 動態(tài)控制vue 頁面元素樣式 components: { TitleBar }, data() { return { title: "動態(tài)樣式", dynamicStyle: {}, //內(nèi)聯(lián)樣式控制 brightStyle: { //亮色 background: "linear-gradient(45deg, rgb(225, 194, 137), rgb(213, 208, 156))", color: "#fff" }, darkStyle: { //暗色 background: "linear-gradient(45deg, rgb(143, 255, 109), rgb(208, 252, 172))", color: "#000" } }; }, methods: { btnColorChange() { console.log(this.dynamicStyle); if (this.compareObj(this.dynamicStyle, this.darkStyle)) { this.dynamicStyle = this.brightStyle; } else { this.dynamicStyle = this.darkStyle; console.log(this.dynamicStyle); } }, compareObj(a, b) { return JSON.stringify(a) == JSON.stringify(b) ? true : false; }, goback() { // } } }; </script> <style lang="scss" scoped> .btn { width: 125px; height: 45px; font-size: 20px; border: none; border-radius: 6px; } .sty-item { padding: 30px; text-align: left; label { margin: 20px 0px; display: block; } } </style>
可以看到對內(nèi)聯(lián)樣式style
的控制可以更加靈活。
3 小結(jié)
動態(tài)操作頁面樣式的用法可以更為豐富多樣,我們這里對基本用法做個簡單介紹;更為復(fù)雜的用法可以結(jié)合前面講的組件動態(tài)傳值來控制子組件的樣式,可實現(xiàn)千變?nèi)f化的效果。
到此這篇關(guān)于vue元素樣式實現(xiàn)動態(tài)改變方法介紹的文章就介紹到這了,更多相關(guān)vue元素樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們在功能、性能和使用場景上有所不同,Webpack提供豐富的功能和配置,適合大型復(fù)雜項目,但可能導(dǎo)致啟動和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項目,需要的朋友可以參考下2024-10-10Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件
這篇文章主要介紹了vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06vue中watch的實際開發(fā)學(xué)習(xí)筆記
watch是Vue實例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11