Vue样式绑定的几种实现方式

更新时间：2024年08月15日 09:42:31 作者：专注写bug

这篇文章主要介绍了Vue样式绑定的几种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

样式绑定在vue中属于一种很常见的操作。在之前博客中针对样式的绑定操作，介绍了一个指令v-bind。缩写为:xxx。

往期回顾

先简单回顾下最开始绑定标签样式的操作，当时是采取指定标签的class属性作为样式的修改。

<template>
  <h1>标签动态属性</h1>
  <!-- <div v-bind:class="dynamicClass"></div>
  <br/>
  <div :class="dynamicClass"></div>

  <br/>
  <div :class="!isShow?'green':'red'"></div>
  <br/> -->
  <div v-bind="dynamicMoreBind"></div>
</template>

<script >
export default{
  data(){
    return{
      dynamicClass:"appClass",
      isShow:true,
      // 同标签 多属性值绑定 可以采取封装对象的形式实现
      dynamicMoreBind:{
        id:"moreId",
        class:"appClass"
      }
    }
  }
}
</script>

<style>
.appClass{
  color:aqua;
  border: solid 1px;
  height: 10%;
  width: 20%;
}
.green{
  color: green;
  border: solid 1px;
  height: 10%;
  width: 20%;
}
.red{
  color: red;
  border: solid 1px;
  height: 10%;
  width: 20%;
}
</style>

但使用拼接字符串的方式进行复杂样式的绑定，是很容易出现问题的。

因此，vue为class的v-bind指令做了功能增强，除了使用字符串之外，表达式的值也可以是对象或数组。

绑定对象

v-bind指令，动态绑定元素属性的时候，可以采取如下的方式进行对象信息的绑定。

<template>
    <h1>绑定样式class</h1>
    <hr>
    <h2>绑定对象</h2>
    <div :class="{active:isActive,'text-danger':hasError}">6666666</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:true, // 如果为true 则使用 .active ，否则不使用
            hasError:true
        }
    }
}
</script>

<style>
    .text-danger{
        color: red;
    }
    .active{
        font-size: 50px
    }
</style>

其中，:class="{active:isActive,'text-danger':hasError}"中，对象的各个属性值的含义如下：

当变量 isActive 为 true 时，则会使用 active 样式
当变量 hasError 为 true 时，则会使用 text-danger 样式

效果如下所示：

若其中某个样式的值为false，显示效果如下：

绑定对象的另一种写法

上述的绑定操作中，如果出现很多的对象属性时，采取该方式依旧不能很好的阅读代码和维护。可以将对象定义在tata区中。

如下所示：

<template>
    <h1>绑定样式class</h1>
    <hr>
    <h2>绑定对象</h2>
    <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->

    <div :class="objClass">7777777</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:false, // 如果为true 则使用 .active ，否则不使用
            hasError:true,
            objClass:{
                'active':true, // 如果为true 则使用 .active ，否则不使用
                'text-danger':true
            }
        }
    }
}
</script>

<style>
    .text-danger{
        color: red;
    }
    .active{
        font-size: 50px
    }
</style>

绑定数组

数组样式数据，绑定class。如果以其他的语言比如Java来看这个问题，其实数组也是对象的一种形式。

前端代码如下所示：

<template>
    <h1>绑定样式class</h1>
    <hr>
    <h2>绑定对象</h2>
    <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->

    <div :class="objClass">7777777</div>
    <h2>绑定数组</h2>
    <div :class="['active','text-danger']">数组样式数据绑定1</div>
    <div :class="arryActClass">数组样式数据绑定2</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:false, // 如果为true 则使用 .active ，否则不使用
            hasError:true,
            objClass:{
                'active':true, // 如果为true 则使用 .active ，否则不使用
                'text-danger':true
            },
            arryActClass:['active','text-danger']
        }
    }
}
</script>

<style>
    .text-danger{
        color: red;
    }
    .active{
        font-size: 50px
    }
</style>

展示效果如下：

:class绑定数组类型数据的写法，这两种效果是一样的。

在数组对象的写法中，还支持三目表达式的语法，如下所示：

<template>
    <h1>绑定样式class</h1>
    <hr>
    <h2>绑定对象</h2>
    <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->

    <div :class="objClass">7777777</div>
    <h2>绑定数组</h2>
    <div :class="['active','text-danger']">数组样式数据绑定1</div>
    <div :class="arryActClass">数组样式数据绑定2</div>
    <div :class="[isActive?'active text-danger':'green']">数组样式数据绑定3</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:false, // 如果为true 则使用 .active ，否则不使用
            hasError:true,
            objClass:{
                'active':true, // 如果为true 则使用 .active ，否则不使用
                'text-danger':true
            },
            arryActClass:['active','text-danger']
        }
    }
}
</script>

<style>
    .text-danger{
        color: red;
    }
    .active{
        font-size: 50px
    }
    .green{
        color: green;
    }
</style>

数组与对象的嵌套

数组与对象嵌套的方式，也能进行标签样式的绑定。但这里需要注意一个细节。

只能是数组嵌套对象。

主要写法如下所示：

:class="['active',{green:isGreen}]"

案例如下所示：

<template>
    <h1>绑定样式class</h1>
    <hr>
    <h2>绑定对象</h2>
    <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->

    <div :class="objClass">7777777</div>
    <h2>绑定数组</h2>
    <div :class="['active','text-danger']">数组样式数据绑定1</div>
    <div :class="arryActClass">数组样式数据绑定2</div>
    <div :class="[isActive?'active text-danger':'green']">数组样式数据绑定3</div>
    <h2>数组嵌套对象</h2>
    <!-- isGreen 变量值为true时，使用 green 样式 -->
    <div :class="['active',{green:isGreen}]">数组嵌套对象</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:false, // 如果为true 则使用 .active ，否则不使用
            hasError:true,
            objClass:{
                'active':true, // 如果为true 则使用 .active ，否则不使用
                'text-danger':true
            },
            arryActClass:['active','text-danger'],
            isGreen:true
        }
    }
}
</script>

<style>
    .text-danger{
        color: red;
    }
    .active{
        font-size: 50px
    }
    .green{
        color: green;
    }
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue.js-div滚动条隐藏但有滚动效果的实现方法
下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-11-11
vue实现登录时的图片验证码
这篇文章主要为大家详细介绍了vue实现登录时的图片验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Vue3 异步组件 suspense使用详解
vue在解析我们的组件时，是通过打包成一个 js 文件，当我们的一个组件引入过多子组件是，页面的首屏加载时间由最后一个组件决定优化的一种方式就是采用异步组件，这篇文章主要介绍了Vue3 异步组件 suspense,需要的朋友可以参考下
2022-12-12
Vue代理请求数据出现404问题及解决
这篇文章主要介绍了Vue代理请求数据出现404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
element-plus 如何设置 el-date-picker 弹出框位置
el-date-picker 组件会自动根据空间范围进行选择比较好的弹出位置,但特定情况下,它自动计算出的弹出位置并不符合我们的实际需求,故需要我们手动设置,这篇文章主要介绍了element-plus 如何设置 el-date-picker 弹出框位置,需要的朋友可以参考下
2024-07-07
vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)
在使用reactive定义的变量时,直接赋值会失去响应式,为了清空 filters并确保响应式,可以使用Object.assign({}, filters)或者遍历对象逐个清除属性,本文介绍vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了),感兴趣的朋友一起看看吧
2025-02-02
解决$store.getters调用不执行的问题
今天小编就为大家分享一篇解决$store.getters调用不执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue 全家桶实现移动端酷狗音乐功能
这篇文章主要介绍了Vue 全家桶实现移动端酷狗音乐功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
Vue中import from的来源及省略后缀与加载文件夹问题
这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02