Vue中动态绑定class和动态绑定style

一.动态绑定class

<template>
  <div class="">
    <div :class="{ aa: isaa > 10 ? true : false }"></div>
    <button @click="fn">点击显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isaa: 10,
    };
  },
  name: "",
  methods: {
    fn() {
      this.isaa++;
    },
  },
};
</script>

<style scoped>
.aa {
  background-color: pink;
  width: 300px;
  height: 300px;
}
</style>

解析:

通过变量的形式来控制元素的显示和隐藏。

代码格式：


:class='{类名:变量名}'

三元表达式写法
:class='{类名:变量名>xxxx?true:false}'

二.动态绑定style

代码:

<template>
  <div class="">
    <div :style="{ color: color, fontSize: fontsize }">123</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: false,
      fontsize: "50px",
    };
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

解析:

 <div :style="{ color: color, fontSize: fontsize }">123</div>

 格式:
 
 :style="{color:变量1,fontsize:变量2}"

  data() {
    return {
      color: false,
      fontsize: "50px",
    };
  },

可以设置样式的显示和隐藏,也可以直接设置样式。

view:

 

三.总结 

动态绑定class：

:class='{类名:变量名}'
变量是一个布尔值,来控制这个类名的显示和隐藏

动态绑定style:

:style='{样式:变量1,样式:变量2}'
变量1和变量2可以是直接写的样式,也可以是一个布尔值来控制样式的显示和隐藏

动态绑定class关联的是一个类名,动态绑定style关联的是样式,都是可以动态进行设置的。