vue之class与style绑定

最新推荐文章于 2023-07-04 20:24:34 发布

IT小崽子

最新推荐文章于 2023-07-04 20:24:34 发布

阅读量486

点赞数 1

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52129860/article/details/129367776

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue之class与style绑定

实验介绍
元素的 class 绑定
数组语法
元素style绑定
数组语法
综合小练习
实验总结

实验介绍

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改。

知识点

元素的 class 对象语法绑定
元素的 class 数组语法绑定
元素的 style 对象语法绑定
元素的 style 数组语法绑定
属性的自动前缀

元素的 class 绑定

元素的 class 绑定很常见，在 Vue 中它的绑定语法也有很多种。

对象语法
给 v-bind:class 一个对象，以动态地切换 class，语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 Boolean 值，大致语法 {className:Boolean}。

使用以下命令引入 vue.js 文件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .active {
        color: pink;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 数组语法绑定 class 当 isActive 为 true 时，active 就成 span 标签的 class -->
      <span v-bind:class="{'active':isActive}">syl</span>
      <!-- isActive 为 true 渲染结果 <span class="active">syl</span> -->
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isActive: true,
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
最终标签 class 渲染结果：

你可以在对象中传入更多属性来动态切换多个 class，v-bind:class 指令也可让普通的 class 并存。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .active {
        color: pink;
        font-size: 22px;
      }
      .red-bg {
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 数组语法绑定 class 当 isActive 为 true 时，active 就成 span 标签的 class -->
      <span class="static" v-bind:class="{'active':isActive,'red-bg':isRed}"
        >syl</span
      >
      <!-- isActive 为 true 渲染后 <span class="static active red-bg">syl</span> -->
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isActive: true,
          isRed: true,
        },
      });
    </script>
  </body>
</html>

运行结果:
在这里插入图片描述

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .active {
        color: pink;
        font-size: 22px;
      }
      .red-bg {
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 数组语法绑定 class -->
      <span v-bind:class="[activeClass,bgColorClass]">syl</span>
      <!-- 渲染后 <span class="active red-bg">syl</span> -->
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          activeClass: "active",
          bgColorClass: "red-bg",
        },
      });
    </script>
  </body>
</html>

运行结果：

在这里插入图片描述

元素style绑定

在前端开发中，内联样式经常被使用到，Vue 中内联样式绑定语法灵活。CSS 属性名可以用驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用单引号括起来) 来命名。

小建议：如果，你曾使用过 React 或者将要学习它，建议采用与 React 同样的 CSS 属性代码风格驼峰式 (camelCase)。

对象语法
使用对象方式绑定 style。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-bind:style="{fontSize:size,backgroundColor:bgColor}">你好，实验楼</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          size: "26px",
          bgColor: "pink",
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
直接绑定到一个样式对象通常更好，这会让模板更清晰，和上面一个例子是同样的效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-bind:style="styleObject">你好，实验楼</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          styleObject: {
            fontSize: "26px",
            backgroundColor: "pink",
          },
        },
      });
    </script>
  </body>
</html>

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-bind:style="[styleObject1,styleObject2]">你好，实验楼</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          //样式一
          styleObject1: {
            fontSize: "26px",
            backgroundColor: "pink",
          },
          //样式二
          styleObject2: {
            marginTop: "200px",
            textAlign: "center",
          },
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述

属性的自动前缀
在开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style 你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀。

引申知识：通过 CANIUSE 查看询 CSS 属性兼容性，自动前缀包 Autoprefixer、postcss。

综合小练习

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p
        v-bind:style="{fontSize:fontSize+'px'}"
        v-bind:class="{active:isActive}"
      >
        你好，实验楼
      </p>
      <button @click="handleClick">变大变色</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          fontSize: 20,
          isActive: true,
        },
        methods: {
          handleClick: function () {
            this.fontSize += 2;
            this.isActive = !this.isActive; // 取反
          },
        },
      });
    </script>
  </body>
</html>

实验总结

元素的 class 对象语法绑定
元素的 class 数组语法绑定
元素的 style 对象语法绑定
元素的 style 数组语法绑定
属性的自动前缀

我们学习了在 Vue 中元素 class 和 style 的绑定，对象语法，数组语法。动态的绑定使得更好的打造交互效果。

IT小崽子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之class与style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改。知识点元素的 class 对象语法绑定元素的 class 数组语法绑定元素的 style 对象语法绑定元素的 style 数组语法绑定。
复制链接

扫一扫