文章詳情頁

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

瀏覽：9日期：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ù)來進(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)用操作方法

排行榜

					
					小區(qū)后臺(tái)管理系統(tǒng)項(xiàng)目前端html頁面模板實(shí)現(xiàn)示例
基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)
asp讀取xml文件和記數(shù)
前端從瀏覽器的渲染到性能優(yōu)化
ASP.NET MVC遍歷驗(yàn)證ModelState的錯(cuò)誤信息
Python Selenium截圖功能實(shí)現(xiàn)代碼
PHP擴(kuò)展之APC——Alternative PHP Cache(可選PHP緩存)
python—sys模塊之獲取參數(shù)的操作
ASP新手必備的基礎(chǔ)知識(shí)
PHP中file_get_contents設(shè)置header請(qǐng)求頭，curl傳輸選項(xiàng)參數(shù)詳解說明
asp知識(shí)整理筆記2（問答模式）
				