目錄 Vue官方文檔 class綁定 style綁定 Vue官方文檔 https://cn.vuejs.org/v2/guide... div v-bind:class="[activeClass, errorClass]"/div可以簡寫成div :class="[activeClass, errorClass]"/div class綁定 !-- * @Author: [you name]
目錄
- Vue官方文檔
- class綁定
- style綁定
Vue官方文檔
https://cn.vuejs.org/v2/guide...
<div v-bind:class="[activeClass, errorClass]"></div> 可以簡寫成 <div :class="[activeClass, errorClass]"></div>
class綁定
<!--
* @Author: [you name]
* @Date: 2021-10-08 15:15:52
* @LastEditors: [you name]
* @LastEditTime: 2021-10-08 22:46:18
* @Description:
-->
<!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;
}
/* 給按鈕設置樣式 */
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綁定
<!--
* @Author: [you name]
* @Date: 2021-10-08 15:15:52
* @LastEditors: [you name]
* @LastEditTime: 2021-10-08 22:54:40
* @Description:
-->
<!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>
/* 給按鈕設置樣式 */
button {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid rgb(179, 167, 167);
background-color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!-- style綁定，這里是表達式結果類型為字符串，為展示點擊按鈕改變樣式，使用的是三目運算，
在第一步中設置了一個可用于判斷的數據，如果該數據值和按鈕內容一樣的話，則會觸發點擊事件，
該style樣式設置為要改變的樣式，即data中設置的styCss樣式 -->
<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: {
// 設置一個數據來進行判斷，其初始值設為空字符串，就會顯示原始樣式
isActive: '',
// 在數據模型中設置經點擊后要變換的樣式，這里聲明一個對象，用在按鈕的綁定上,點擊后切換的樣式
styCss: {
background: 'red',
color: 'white'
}
},
methods: {
// 為點擊事件實現三按鈕之間的互斥效果，即點擊一個按鈕，該按鈕的樣式改變，
//其他的不變，點擊另一個時，前一個按鈕的樣式還原，當前按鈕樣式改變，
//那么就需要在點擊方法中添加將目標源元素的文本值賦予需要進行判斷的數據時，
//當點擊的按鈕的內容和判斷的條件一樣時，成功觸發該點擊事件，實現切換并且改變樣式的效果。
changeHandler(event) {
this.isActive = event.target.innerText
}
}
})
</script>
</body>
</html>
以上就是Vue--分別運用class綁定和style綁定，通過點擊實現樣式的切換的詳細內容，更多關于Vue-運用class style綁定點擊樣式切換的資料請關注技圈網其它相關文章！
聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。