文章詳情頁(yè)

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

瀏覽：3日期：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綁定，通過點(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不唯一問題下一條：vue .then和鏈?zhǔn)秸{(diào)用操作方法

排行榜

					
					python 批量下載bilibili視頻的gui程序
python鏈表類中獲取元素實(shí)例方法
詳解Vue中Axios封裝API接口的思路及方法
python中if嵌套命令實(shí)例講解
使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果
使用css實(shí)現(xiàn)全兼容tooltip提示框
python b站視頻下載的五種版本
CSS自定義滾動(dòng)條樣式案例詳解
python中HTMLParser模塊知識(shí)點(diǎn)總結(jié)
PHP與已存在的Java應(yīng)用程序集成
SpringBoot快速集成jxls-poi(自定義模板,支持本地文件導(dǎo)出,在線文件導(dǎo)出)
				