小编明天和大家分享对于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>大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈
发表回复