Vue.js样式动态绑定实现小结
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结：
动态切换的核心思想：
利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～
vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这种特性，我们得以实现class和style的动态绑定～
（一定要充分理解数据驱动的含义，共勉～）
特别说明：
1. v-bind在处理class和style时，专门增强了它。表达式的结果类型不仅可以是字符串，还可以是对象和数组。
v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id 。
根据不同的项目需求和不同的实现思路，现初步总结了如下方法：
（欢迎小伙伴们补充添加，一起进步～～）
class属性绑定
1. 三目元算符方式：
<!--vue代码-->
<ul>
<li v-for="item in itemData" :key="item">
<i :class="item.isA ? 'class_a' : 'class_b'"></i>
</li>
</ul>
<!-- CSS代码 -->
.class_a,.class_b{
/*这里可以写一些公共样式*/
}
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}
2. 基本绑定：
<!--vue代码-->
<div :class="{class_a:isActive}"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
isActive:true
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的样式*/
}
以上可以根据isACtive的值，动态判断来进行class样式的绑定。
特别说明：
1. vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量，可以通过 class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。
2. v-bind:class 虽然与class属性里绑定变量的方式不能共存，却可以与原生的class特性共存，即 一个DOM标签中允许同时出现原生class和v-bind:class。
3. 为了避免不必要的问题，要写在data中的值尽量不要用中划线，可以采用下划线～如果data中用中划线的话，需要加单引号，否则出错，而且，在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。
3. 可以传入多个属性动态切换多个class
<!--vue代码--> <div :class="{class_a:isActive,class_b:isActive_b}"></div>
4. 对象绑定
<!--vue代码-->
<div ：class="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
classObject:{
class_a:true,
class_b:true
}
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}
特别说明：
这里v-bind直接利用对象进行绑定，需注意对象中的键名应与class样式名保持一致。
5. 数组绑定
数组里的变量改变时，动态更新class列表
<!--vue代码-->
<div ：class="[classA,classB]"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
classA:'class_a',
classB:'class_b'
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}
6. 绑定返回对象的计算属性
强大且常用的模式～
<!--vue代码-->
<div v-bind="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
isActive:true
}
},
computed:{
classObject:function () {
return{
class_a:this.isActive,
class_b:!this.isActive
// 这里要结合自身项目情况修改填写
}
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}
style属性绑定（内联）
1. 直接设置样式
<!--vue代码-->
<div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
selectedColor:pink,
fontSize:20
// 注意前后名称的一致性
}
}
}
2. 也可以使用对象
（可以参照上述class）
<!--vue代码-->
<div ：style="styleObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
styleObject{
selectedColor:pink,
fontSize:20
}
}
}
}
3. 使用数组
<!--vue代码-->
<div :style="[styleA,styleB]"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
styleA:{
color:'red',
fontSize: '30px'
},
styleB:{
color:'green',
fontSize: '15px'
},
}
}
}
小伙伴们可根据上述方法结合自身项目情况修改调用，如有问题，欢迎交流
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在Vue+Ts+Vite项目中配置别名指向不同的目录并引用的案例详解
这篇文章主要介绍了在Vue+Ts+Vite项目中配置别名指向不同的目录并引用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,下面这篇文章主要给大家介绍了关于VUE引入DataV报错解决的实战记录,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue 表格单选按钮的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue+echarts实现中国地图流动效果(步骤详解),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要为大家详细介绍了vue调用语音播放的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最近一段时间，一直在做主题方面的工作。我们的主题，并不是简单切换一下颜色，或者排版变化这些，而是变化比较大的主题。比如说：主题1和主题2看起来完全不一样，功能甚至都不一样。这样，通过切换css就无法做到了，因此我思考良久，使用了如下2种方法2021-06-06
Vue Element Sortablejs实现表格列的拖拽案例详解
这篇文章主要介绍了Vue Element Sortablejs实现表格列的拖拽案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了详解如何在你的Vue项目配置vux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下2018-07-07
最新评论