Vue样式操作

原理：其实就是对style属性和class属性进行绑定，达到动态更改其属性值的目的

1、对象语法

<template>
  <div :style="{ color: color, fontSize: fontSize + 'px' }"> 
    Hello, Alex!
  </div>
  <div v-bind:class="{class1: check, class2: check2}">
    Hello, Alex!
  </div>
  <div class="btn" @click="change">修改样式</div>
</template>
<script>
export default {
  data() {
    return {
      color: '#f00',
      fontSize: 12,
      check: true,
      check2: false,
    }
  },
  methods: {  
    change() {  
      this.check2 = !this.check2  
    }  
  }
}
</script>

2、对象绑定 (实际上跟上面一样)

<template>
  <div v-bind:style="styleObj">Hello, Alex!</div>
  // 等价于 <div :style="styleObj">Hello, Alex!</div>
  // 等价于 <div style="color:#f00;font-size:12px;">Hello, Alex!</div>
  <div :class="classObj">Hello, Alex!</div>
  // 等价于 <div class="class1">Hello, Alex!</div>
</template>
<script>
export default {
  data() {
    return {
      styleObj: {
        color: '#f00',
        fontSize: '12px',
      },
      classObj: {
        class1: true,
        class2: false,
      }
    }
  }
}
</script>

3、数组语法

<template>
  <div :class="[check ? 'class1' : '', check2 ? 'class2' : '']">
    Hello, Alex!
  </div>
  <div class="hello" :class="[{'class1':check}, {'class2':check2}]">
    Hello, Alex!
  </div>
  <div :class="[class1, class2]">Hello, Alex!</div>
  <div class="box" :class="[check, check2]">Hello, Alex!</div>
  <div class="btn" @click="change">修改样式</div>
  <div :style="[defaultStyle, activeStyle]">Hello, Alex!</div>
</template>
<script>
export default {
  data() {
    return {
      class1: 'class1',
      class2: 'class2',
      defaultStyle: {
        color: '#f00',
        fontSize: '12px'
      },
      activeStyle: {
        color: '#333',
        fontWeight: '700'
      },
      check: 'class1',
      check2: '',
    }
  },
  methods: {  
    change() {  
      this.check2 = this.check2 == '' ? "class2" : ''
    }  
  }
}
</script>

4、计算属性或者自定义方法（返回对象）

<template>
  <div :style="getStyleObj">Hello, Alex!</div>
  //<div :style="getStyleObj2()">Hello, Alex!</div>
</template>
<script>
export default {
  data() {
    return {
      textColor: '#f00',
      fontSize: 12
    }
  },
  computed: {
    getStyleObj() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      }
    }
  },
  methods: {
    getStyleObj2: function () {
      return { 
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

6、字符串变量

<template>
  <div :class="isActive?'class1':'class2'"></div>
  <div :style="divStyle">
    Hello, Alex!
  </div>
  <div :style="
  'color:' + textColor + ';font-size:' + fontSize + 'px;'
  ">
    Hello, Alex!
  </div>
  <div :style=`color:${textColor};font-size:${fontSize}px;`>
    Hello, Alex!
  </div>
</template>
<script>
export default {
  data() {
    return {
      divStyle: "width:200px;height:200px;background-color:red;",
      textColor: '#f00',
      fontSize: 12,
      isActive: true,
    }
  },
}

注意：

1、v-bind:style 等价于 :style

:style是v-bind:style的简写形式。同理 v-bind:class 等价于 :class

2、使用:style绑定样式：

不能使用常规的css样式，如font-size,background-color等，如果用到此类样式，需要遵循驼峰命名法，即fontSize，backgroundColor这样，否则报错。

3、为了避免不必要的问题，data中的style和class，最好不要用中划线。

如果data中使用中划线的话，需要加单引号。否则出错。而且在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。

vue模板里面操作样式的方式有哪些？