脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue样式绑定方式

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

 更新时间：2024年08月15日 09:42:31   作者：专注写bug  
这篇文章主要介绍了Vue样式绑定的几种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

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

vue 官网 样式绑定

往期回顾

先简单回顾下最开始绑定标签样式的操作，当时是采取指定标签的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使用socket与服务端进行通信的代码详解

    vue使用socket与服务端进行通信的代码详解

    这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下
    2023-09-09
  • 使用vue制作滑动标签

    使用vue制作滑动标签

    这篇文章主要为大家详细介绍了使用vue制作滑动标签，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue-cli 关闭热更新操作

    vue-cli 关闭热更新操作

    这篇文章主要介绍了vue-cli 关闭热更新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3之使用js实现动画示例解析

    Vue3之使用js实现动画示例解析

    这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 详解如何实现一个简单的 vuex

    详解如何实现一个简单的 vuex

    本篇文章主要介绍了如何实现一个简单的 vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue项目实现文件下载进度条功能

    vue项目实现文件下载进度条功能

    这篇文章主要介绍了vue项目实现文件下载进度条功能,本文通过具体实现代码给大家介绍的非常详细，需要的朋友可以参考下
    2021-09-09
  • Vue+ElementUI table实现表格分页

    Vue+ElementUI table实现表格分页

    这篇文章主要为大家详细介绍了Vue+ElementUI table实现表格分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • elementui源码学习仿写一个el-tooltip示例

    elementui源码学习仿写一个el-tooltip示例

    本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件
    2023-07-07
  • Vue.js 中制作自定义选择组件的代码附演示demo

    Vue.js 中制作自定义选择组件的代码附演示demo

    这篇文章主要介绍了Vue.js 中制作自定义选择组件的代码附演示demo,通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • vue中h5端打开app(判断是安卓还是苹果)

    vue中h5端打开app(判断是安卓还是苹果)

    这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

最新评论