共计 3327 个字符，预计需要花费 9 分钟才能阅读完成。
小编明天和大家分享对于 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>最初渲染进去的 DOM 长这样
<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>最初渲染进去的 DOM 长这样
<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>下面的代码，将 class 在父页面给子组件，成果和间接在子组件中增加 class 成果是一样的，渲染进去的 DOM 也是一样的
<div>
Hello World
<div class="green_color">
single
</div>
</div>然而当子组件不仅是一个最外层元素包裹的时候，是不能“向下传递”的，如果也想获取在组件中注册的 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 :class="$attrs.class">one</div>
<div>two</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈
