小編今天和大家分享關于Vue中的樣式和class的綁定，
首先聲明，這篇文章出現的class不是類聲明的關鍵字，而是标簽内部的屬性，用于實作樣式
在原生html中，我們給一個元素添加樣式的時候，大概有這麼兩種方式
<!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>
</head>
<body>
<div style="color:red">我是一個紅色的小可愛</div>
</body>
</html> 第二種方式就是在head标簽之間，添加style标簽，将樣式統一寫在style之間，然後在标簽中定義對應的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>
<style>
.red_color{
color:red
}
</style>
</head>
<body>
<div class="red_color">我同樣是一個紅色的小可愛</div>
</body>
</html> 對于Vue來說，有以下四種方式定義樣式和class
一、通過Vue提供的v-bind方式綁定字元串，就像這樣
<html>
<head>
<style>
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
</style>
</head>
<body>
<script>
const app = Vue.createApp({
data(){
return {
classString:'red_color'
}
},
template: `<div :class="classString">Hello World</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> 最後渲染出來的DOM長這樣
<div class="red_color">Hello World</div> 二、class綁定的還可以是個Object，這個Object比較特别，key為定義好的class，value為Boolean，為true的時候，添加該class，否則不添加該class
<html>
<head>
<style>
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
</style>
</head>
<body>
<script>
const app = Vue.createApp({
data(){
return {
classObj:{
red_color: true,
green_color: true,
yellow_color: false
}
}
},
template: `<div :class="classObj">Hello World</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> <div class="red_color green_color">Hello World</div> 三、class綁定的還可以是個Array，當然Array中的元素也可以是個Object，隻不過這個Object的規則和上面的一樣
<html>
<head>
<style>
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
</style>
</head>
<body>
<script>
const app = Vue.createApp({
data(){
return {
classArray:['red_color','green_color',{yellow_color: true}]
}
},
template: `<div :class="classArray">Hello World</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> <div class="red_color green_color yellow_color">Hello World</div> 四、還可以通過綁定style的方式
<html>
<body>
<script>
const app = Vue.createApp({
data(){
return {
styleObj:{
color:'yellow'
}
}
},
template: `<div :style="styleObj">Hello World</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> 當然最後就在頁面中渲染出黃色的元素
上面介紹的都沒涉及到元件，要是頁面中有元件又會是什麼樣呢
對于元件中樣式，有這麼兩種情況，一個是子元件中隻有一個最外層元素包裹的時候，是可以沿着父元件傳遞下去的，也就是對應的class給子元件内部，或者直接給在父頁面的子元件上效果是一樣的
<html>
<head>
<style>
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
</style>
</head>
<body>
<script>
const app = Vue.createApp({
data(){
return {}
},
template: `<div>
Hello World
<demo class="green_color" />
</div>`
})
app.component('demo',{ // 隻有一個最外層元素的時候，把class給元件上也可以實作
template:`<div>single</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> <div>
Hello World
<div class="green_color">
single
</div>
</div> <html>
<head>
<style>
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
</style>
</head>
<body>
<script>
const app = Vue.createApp({
data(){
return {}
},
template: `<div>
Hello World
<demo class="green_color" />
</div>`
})
app.component('demo',{ // 隻有一個最外層元素的時候，把class給元件上也可以實作
template:`<div :class="$attrs.class">one</div>
<div>two</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html> ![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)