文章詳情頁

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

瀏覽：28日期：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ù)來進行判斷，其初始值設(shè)為空字符串，就會顯示原始樣式isActive: '',// 在數(shù)據(jù)模型中設(shè)置經(jīng)點擊后要變換的樣式，這里聲明一個對象，用在按鈕的綁定上,點擊后切換的樣式styCss: { background: 'red', color: 'white'} }, methods: {// 為點擊事件實現(xiàn)三按鈕之間的互斥效果，即點擊一個按鈕，該按鈕的樣式改變，//其他的不變，點擊另一個時，前一個按鈕的樣式還原，當(dāng)前按鈕樣式改變，//那么就需要在點擊方法中添加將目標(biāo)源元素的文本值賦予需要進行判斷的數(shù)據(jù)時，//當(dāng)點擊的按鈕的內(nèi)容和判斷的條件一樣時，成功觸發(fā)該點擊事件，實現(xiàn)切換并且改變樣式的效果。changeHandler(event) { this.isActive = event.target.innerText} }}) </script></body></html>

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

JavaScript

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

排行榜

					
					一文帶你徹底理解Java序列化和反序列化
用Spring JMS使異步消息變得簡單
關(guān)于IDEA 2020.3 多窗口視圖丟失的問題
PHP驗證碼工具－Securimage
js實現(xiàn)碰撞檢測
JS實現(xiàn)前端動態(tài)分頁碼代碼實例
Android 簡單的實現(xiàn)滑塊拼圖驗證碼功能
Java源碼解析之SortedMap和NavigableMap
ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條
Django 模板中常用的過濾器實現(xiàn)
Java 生成隨機驗證碼圖片的示例
				