【Vue】基础系列（四）样式绑定 - class - style

最新推荐文章于 2024-04-19 15:01:25 发布

VIP文章 YK菌

最新推荐文章于 2024-04-19 15:01:25 发布

阅读量2.4k

点赞数 5

分类专栏：前端框架Vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44972008/article/details/112784075

版权

在这里插入图片描述

在应用界面中, 某个(些)元素的样式是变化的，class/style 绑定就是专门用来实现动态样式效果的技术

1. `class` 绑定

:class='xxx' // xxx可以是字符串、对象、数组。

字符串

表达式是字符串: 'classA'

适用于：类名不确定，要动态获取

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
   
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
   
      border: 4px solid red;
      ;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
   
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .normal {
   
      background-color: skyblue;
    }

  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{
   {
   name}}</div>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false