vue入门篇(七):Class和Style绑定

前言

这篇文章和大家一起来学习一下Vue中的Class和Style绑定,它们都与样式有关,所以它们在开发中十分常见,我们需要熟悉它们的用法。

Class绑定

不管时Class绑定还是Style绑定都有两种用法,一个是对象的形式,一个是数组的形式。我们先来看看Class绑定是如何使用的吧。下面是一个例子:


<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>Documenttitle>
    <style>
      .activated {
        color: red;
        background-color: blue;
        border: 0;
      }
    style>
  head>

  <body>
    <div id="app">
      
      <button @click="toggleStyle" :class="classObj">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          isActivated: false
        },
        computed: {
          classObj() {
              return {
                activated: this.isActivated
              }
          }
        },
        methods: {
          toggleStyle() {
            this.isActivated = !this.isActivated;
          }
        }
      });
    script>
  body>
html>

上面的代码中,我们给button绑定一个对象,为了让代码更加清晰,我们把这个对象放到计算属性中,该对象中的属性就是button所绑定的class类,它与数据isActivated是有关的,当我们点击按钮使isActivated的值发生变化从而让样式也可以动态变化。

同样,我们也可以绑定一个数组,数组里面可以写多个变量。


<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>Documenttitle>
    <style>
      .activated {
        color: red;
      }

      .activated-one {
        font-size: 40px;
      }
    style>
  head>

  <body>
    <div id="app">
      
      <button @click="toggleStyle" :class="[activated, activatedOne]">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          activated: "",
          activatedOne: ""
        },
        methods: {
          toggleStyle() {
            this.activated = this.activated === "activated" ? "" : "activated";
            this.activatedOne =
              this.activatedOne === "activated-one" ? "" : "activated-one";
          }
        }
      });
    script>
  body>
html>

当然,我们还可以在数组里面传入一个对象,用法和前面是一样的。

这里还要补充一点,当用在Vue组件中时,如果子组件有普通的class类,而父组件绑定了新的class是不会覆盖掉子组件的样式的,反而会组合在一起。

Style绑定

Style绑定和CSS内联样式很相像,它也可以和计算属性来搭配使用。


<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>Documenttitle>
  head>
  <body>
    <div id="app">
      <button @click="toggleStyle" :style="styleObj">
        Hello World
      button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          styleObj: {
            color: "",
            fontSize: ""
          }
        },
        methods: {
          toggleStyle() {
            this.styleObj.color = this.styleObj.color === "red" ? "" : "red";
            this.styleObj.fontSize =
              this.styleObj.fontSize === "40px" ? "" : "40px";
          }
        }
      });
    script>
  body>
html>

数组的用法和前面一致就不多说了。

大家注意,它的属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名。而且它还有一个很好的特性:

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

也就是说,我们不用自己去写一大堆浏览器前缀了。

总结

好了,今天我们学习了Class和Style绑定的用法,这讲成为我们Vue开发中最常用的特性之一了。

参考

【1】Class和Style绑定

你可能感兴趣的:(Vue.js,vue)