文章詳情頁

Vue分別運(yùn)用class綁定和style綁定通過點擊實現(xiàn)樣式切換

瀏覽：8日期：2022-06-12 17:22:37

目錄Vue官方文檔class綁定style綁定Vue官方文檔

https://cn.vuejs.org/v2/guide...

<div v-bind:class='[activeClass, errorClass]'></div>可以簡寫成<div :class='[activeClass, errorClass]'></div>class綁定

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js'></script> <style>/* 點擊前的樣式 */.class1 { background-color: #fff; color: #333;}/* 點擊之后的樣式 */.class2 { background-color: #f52819; color: #fff;}/* 給按鈕設(shè)置樣式 */button { width: 80px; height: 40px; border-radius: 5px; border: 2px solid rgb(179, 167, 167); background-color: #fff;} </style></head><body> <div id='app'><button @click='handler1' :class='[isYes1? 'class1' : 'class2']'>按鈕1</button><button @click='handler2' :class='[isYes2? 'class1' : 'class2']'>按鈕2</button><button @click='handler3' :class='[isYes3? 'class1' : 'class2']'>按鈕3</button> </div> <script>// 第二種方法let vm = new Vue({ el:'#app', data:{isYes1:true,isYes2:true,isYes3:true, }, methods:{handler1(){ this.isYes1 = false, this.isYes2 = true, this.isYes3 = true, console.log('第一個點擊事件');},handler2(){ this.isYes2 = false, this.isYes1 = true, this.isYes3 = true, console.log('第二個點擊事件');},handler3(){ this.isYes3 = false, this.isYes2 = true, this.isYes1 = true, console.log('第三個點擊事件');}, }}) </script></body></html>style綁定

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js'></script> <style>/* 給按鈕設(shè)置樣式 */button { width: 80px; height: 40px; border-radius: 5px; border: 2px solid rgb(179, 167, 167); background-color: #fff;} </style></head><body> <div id='app'><button :style='isActive =='按鈕1' ? styCss : ''' @click='changeHandler'>按鈕1</button><button :style='isActive =='按鈕2' ? styCss : ''' @click='changeHandler'>按鈕2</button><button :style='isActive =='按鈕3' ? styCss : ''' @click='changeHandler'>按鈕3</button> </div> <script>let vm = new Vue({ el: '#app', data: {// 設(shè)置一個數(shù)據(jù)來進(jìn)行判斷，其初始值設(shè)為空字符串，就會顯示原始樣式isActive: '',// 在數(shù)據(jù)模型中設(shè)置經(jīng)點擊后要變換的樣式，這里聲明一個對象，用在按鈕的綁定上,點擊后切換的樣式styCss: { background: 'red', color: 'white'} }, methods: {// 為點擊事件實現(xiàn)三按鈕之間的互斥效果，即點擊一個按鈕，該按鈕的樣式改變，//其他的不變，點擊另一個時，前一個按鈕的樣式還原，當(dāng)前按鈕樣式改變，//那么就需要在點擊方法中添加將目標(biāo)源元素的文本值賦予需要進(jìn)行判斷的數(shù)據(jù)時，//當(dāng)點擊的按鈕的內(nèi)容和判斷的條件一樣時，成功觸發(fā)該點擊事件，實現(xiàn)切換并且改變樣式的效果。changeHandler(event) { this.isActive = event.target.innerText} }}) </script></body></html>

以上就是Vue--分別運(yùn)用class綁定和style綁定，通過點擊實現(xiàn)樣式的切換的詳細(xì)內(nèi)容，更多關(guān)于Vue-運(yùn)用class style綁定點擊樣式切換的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！

JavaScript

上一條：解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題下一條：vue .then和鏈?zhǔn)秸{(diào)用操作方法

排行榜

					
					PHP擴(kuò)展之壓縮與歸檔擴(kuò)展1——Bzip2
QuickTime流媒體和Java
JavaScript函數(shù)重載操作實例淺析
Android實現(xiàn)動態(tài)改變shape.xml中圖形的顏色
Java用BigDecimal解決double類型相減時可能存在的誤差
python GUI庫圖形界面開發(fā)之PyQt5滑塊條控件QSlider詳細(xì)使用方法與實例
Java基于注解實現(xiàn)的鎖實例解析
python使用ctypes庫調(diào)用DLL動態(tài)鏈接庫
老虎身上的斑紋－－－正確使用JAVA1.5里的Annotation
ASP.NET MVC實現(xiàn)橫向展示購物車
Spring EL表示式的運(yùn)用@Value說明
				