9.Vue2.x 绑定样式—style

最新推荐文章于 2024-04-30 16:57:21 发布

一个不专业的码农

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量269

点赞数 5

分类专栏： Vue2.X 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45858439/article/details/137841465

版权

Vue2.X 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

- 条件样式

条件样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .classA {
        border: 3px solid black;
      }
      .classB {
        background-color: skyblue;
      }
      .classC {
        color: red;
      }
      .classD {
        text-shadow: 2px 2px 3px yellow;
      }
    </style>
  </head>
  <body>
    <!-- 
        1.绑定class样式
            :class="xxx"  xxx可以是字符串，对象，数据
        2.绑定style样式
            :style="{color: activeColor, fontSize: fontSize + 'px'}"
                    其中activeColor/fontSize是data属性
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- <h2 class="classA classB classC classD">过年好</h2> -->
      <!-- class的字符串写法，适用于：类名不确定，要动态获取 -->
      <h2 class="classA" :class="myStyle">{{title}}</h2>

      <!-- class的对象写法，适用于：类名确定，但不确定用不用 -->
      <h2 class="classA" :class="{classC:hasC, classD:hasD}">{{title}}</h2>

      <!-- class的三元表达式，适用于：类名确定，但不确定用不用 -->
      <h2 class="classA" :class="hasC ? 'classC' : ''">{{title}}</h2>

      <!-- class的数组写法，适用于：同时使用多个class -->
      <h2 class="classA" :class="[b,c,d]">{{title}}</h2>

      <!-- 绑定style -->
      <h2 class="classA" :class="[b,c,d]" :style="{fontSize:size}">
        {{title}}
      </h2>
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          title: "大家过年好",
          myStyle: "classB",
          hasC: false, // 表示是否使用ClassC的样式
          hasD: true, // 表示是否使用ClassD的样式
          b: "classB",
          c: "classC",
          d: "classD",
          size: "40px",
        },
      });
    </script>
  </body>
</html>