快捷導(dǎo)航

vue元素樣式實現(xiàn)動態(tài)改變方法介紹

更新時間：2022年09月15日 09:08:36 作者：Saga Two

vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class

1 前言

在vue項目中，很多場景要求我們動態(tài)改變元素的樣式，比如按鈕由不可點擊到可以點擊樣式改變，這種情況下，我們通常根據(jù)vue框架提供的動態(tài)綁定v-bind來操作元素的class列表賀內(nèi)聯(lián)樣式來達(dá)到動態(tài)設(shè)置元素樣式的效果；

2 動態(tài)改變樣式的方法

2.1 操作元素class列表

我們通過vue內(nèi)置的:class (v-bind:class)來動態(tài)操作元素的class；如下所示：

<div :class="{ class-a: isActive }"></div>
<script>
data() {
  return {
    isActive: true
  }
}
<script>
<style scoped>
.class-a {
  ...
}
</style>

其中class-a代表樣式表style中的一個樣式對象,isActive時控制樣式是否生效的變量，若isActive為true，則代表class-a樣式生效，此時class-a回家加載到div元素的樣式列表中，isActive為false則不生效，不會將class加載到div元素額樣式列表中。

我們用實例來演示一下，實例實現(xiàn)的效果時效果圖如下：

實例代碼如下：

<template>
  <div :class="{ 'dark-theme': isActive }">
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div>
      <div class="sty-item">
        <label>改變頁面主題色:</label>
        <TButton @clickhandle="changeTheme" />
      </div>
    </div>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import TButton from "@/components/TButton";
export default {
  name: "", // 動態(tài)控制vue 頁面元素樣式
  components: {
    TitleBar,
    TButton
  },
  data() {
    return {
      isActive: false, // class是否生效
      title: "動態(tài)樣式",
    };
  },
  methods: {
    changeTheme() {
      if (this.isActive) {
        this.isActive = false;
      } else {
        this.isActive = true;
      }
    },
    goback() {
      //
    }
  }
};
</script>
<style lang="scss" scoped>
.page-body1 {
  background-color: rgb(21, 126, 29);
  margin: 10px 15px;
}
.dark-theme {
  background-color: rgb(41, 46, 42);
  color: azure;
}
</style>

除此之外，還可以直接使用對象變量來控制class的變化，并且使用動態(tài)class同時，也能同時設(shè)置普通楊式，代碼如下所示：

<div
  class="static"
  :class="classObj"
></div>
<script>
data() {
  return {
    classObj: {
      'class-a': true,
      'class-b': false
    }
  }
}
<script>
<style scoped>
.static {
  ...
}
.class-a {
  ...
}
.class-b {
  ...
}
</style>

以上代碼最后作用于div上的class列表為：[static,class-a]

2.2 操作元素內(nèi)聯(lián)樣式

與上面操作元素class列表原利相同，我們通過vue內(nèi)置的:style (v-bind:style)來動態(tài)操作元素的內(nèi)聯(lián)樣式；和class不同的是，內(nèi)聯(lián)樣式本身就是一個對象，這就意味著style可以更為靈活的變化，如下所示：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
<script>

也可以寫作對象形式，以上代碼等同于：

<div :style="styleObject"></div>
<script>
data() {
  return {
    styleObject: {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
<script>

我們用實例來演示一下，實例實現(xiàn)的效果時效果圖如下：

實例代碼如下：

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div>
      <div class="sty-item">
        <label>改變按鈕樣式:</label>
        <button class="btn" :style="dynamicStyle" @click="btnColorChange">
          我是按鈕
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
export default {
  name: "", // 動態(tài)控制vue 頁面元素樣式
  components: {
    TitleBar
  },
  data() {
    return {
      title: "動態(tài)樣式",
      dynamicStyle: {}, //內(nèi)聯(lián)樣式控制
      brightStyle: {
        //亮色
        background:
          "linear-gradient(45deg, rgb(225, 194, 137), rgb(213, 208, 156))",
        color: "#fff"
      },
      darkStyle: {
        //暗色
        background:
          "linear-gradient(45deg, rgb(143, 255, 109), rgb(208, 252, 172))",
        color: "#000"
      }
    };
  },
  methods: {
    btnColorChange() {
      console.log(this.dynamicStyle);
      if (this.compareObj(this.dynamicStyle, this.darkStyle)) {
        this.dynamicStyle = this.brightStyle;
      } else {
        this.dynamicStyle = this.darkStyle;
        console.log(this.dynamicStyle);
      }
    },
    compareObj(a, b) {
      return JSON.stringify(a) == JSON.stringify(b) ? true : false;
    },
    goback() {
      //
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  width: 125px;
  height: 45px;
  font-size: 20px;
  border: none;
  border-radius: 6px;
}
.sty-item {
  padding: 30px;
  text-align: left;
  label {
    margin: 20px 0px;
    display: block;
  }
}
</style>

可以看到對內(nèi)聯(lián)樣式style的控制可以更加靈活。