Vue3样式绑定
小编今天和大家分享关于Vue中的样式和class的绑定，
首先声明，这篇文章出现的class不是类声明的关键字，而是标签内部的属性，用于实现样式
在原生html中，我们给一个元素添加样式的时候，大概有这么两种方式
Document - 锐客网
我是一个红色的小可爱
第二种方式就是在head标签之间，添加style标签，将样式统一写在style之间，然后在标签中定义对应的class
Document - 锐客网 .red_color{
color:red
}
我同样是一个红色的小可爱
对于Vue来说，有以下四种方式定义样式和class
一、通过Vue提供的v-bind方式绑定字符串，就像这样
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
最后渲染出来的DOM长这样
Hello World二、class绑定的还可以是个Object，这个Object比较特别，key为定义好的class，value为Boolean，为true的时候，添加该class，否则不添加该class
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
最后渲染出来的DOM长这样
Hello World三、class绑定的还可以是个Array，当然Array中的元素也可以是个Object，只不过这个Object的规则和上面的一样
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
最后渲染出来的DOM长这样
Hello World四、还可以通过绑定style的方式
当然最后就在页面中渲染出黄色的元素
上面介绍的都没涉及到组件，要是页面中有组件又会是什么样呢
对于组件中样式，有这么两种情况，一个是子组件中只有一个最外层元素包裹的时候，是可以沿着父组件传递下去的，也就是对应的class给子组件内部，或者直接给在父页面的子组件上效果是一样的
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
上面的代码，将class在父页面给子组件，效果和直接在子组件中添加class效果是一样的，渲染出来的DOM也是一样的
Hello Worldsingle但是当子组件不仅是一个最外层元素包裹的时候，是不能“向下传递”的，如果也想获取在组件中注册的class，可以这样实现
.red_color{
color:red
}
.green_color{
color:green
}
.yellow_color{
color:yellow
}
【Vue3样式绑定】大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈
文章图片
推荐阅读
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 事件解绑与解绑的兼容代码
- react-navigation|react-navigation 动态修改 tabBar 样式
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- 移动端事件绑定
- 1.块级作用域绑定
- 地图|高德地图清除指定覆盖物 自定义覆盖物样式（完整dome）
- 数据尖兵软件|数据尖兵软件,详细介绍
- vue|vue3替代vuex的框架piniajs实例教程
- VUE3中watch和watchEffect的用法详解