文章詳情頁(yè)

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

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

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

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

<div v-bind:class='[activeClass, errorClass]'></div>可以簡(jiǎn)寫成<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>/* 點(diǎn)擊前的樣式 */.class1 { background-color: #fff; color: #333;}/* 點(diǎn)擊之后的樣式 */.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('第一個(gè)點(diǎn)擊事件');},handler2(){ this.isYes2 = false, this.isYes1 = true, this.isYes3 = true, console.log('第二個(gè)點(diǎn)擊事件');},handler3(){ this.isYes3 = false, this.isYes2 = true, this.isYes1 = true, console.log('第三個(gè)點(diǎn)擊事件');}, }}) </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è)置一個(gè)數(shù)據(jù)來(lái)進(jìn)行判斷，其初始值設(shè)為空字符串，就會(huì)顯示原始樣式isActive: '',// 在數(shù)據(jù)模型中設(shè)置經(jīng)點(diǎn)擊后要變換的樣式，這里聲明一個(gè)對(duì)象，用在按鈕的綁定上,點(diǎn)擊后切換的樣式styCss: { background: 'red', color: 'white'} }, methods: {// 為點(diǎn)擊事件實(shí)現(xiàn)三按鈕之間的互斥效果，即點(diǎn)擊一個(gè)按鈕，該按鈕的樣式改變，//其他的不變，點(diǎn)擊另一個(gè)時(shí)，前一個(gè)按鈕的樣式還原，當(dāng)前按鈕樣式改變，//那么就需要在點(diǎn)擊方法中添加將目標(biāo)源元素的文本值賦予需要進(jìn)行判斷的數(shù)據(jù)時(shí)，//當(dāng)點(diǎn)擊的按鈕的內(nèi)容和判斷的條件一樣時(shí)，成功觸發(fā)該點(diǎn)擊事件，實(shí)現(xiàn)切換并且改變樣式的效果。changeHandler(event) { this.isActive = event.target.innerText} }}) </script></body></html>

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

JavaScript

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

排行榜

					
					Java基礎(chǔ)之Object類詳解
python GUI庫(kù)圖形界面開發(fā)之PyQt5滑塊條控件QSlider詳細(xì)使用方法與實(shí)例
利用CSS3新特性創(chuàng)建透明邊框三角
python使用ctypes庫(kù)調(diào)用DLL動(dòng)態(tài)鏈接庫(kù)
ASP.NET MVC實(shí)現(xiàn)橫向展示購(gòu)物車
詳解python程序中的多任務(wù)
python for循環(huán)內(nèi)輸出和外輸出方式
python3 通過(guò) pybind11 使用Eigen加速代碼的步驟詳解
PHP?redis?Sorted?Set實(shí)現(xiàn)字符串去重代碼示例
python GUI庫(kù)圖形界面開發(fā)之PyQt5信號(hào)與槽基礎(chǔ)使用方法與實(shí)例
Python數(shù)據(jù)可視化圖實(shí)現(xiàn)過(guò)程詳解
				