Vue动态样式方法实例总结

在Vue中，有多种方法可以实现动态修改样式。本文将总结并讲解其中的三种方法。

1. 绑定style

使用:style指令可以将一个样式对象应用到元素上，该样式对象中的属性将会动态地更新：

<template>
  <div :style="{ color: textColor }">这是一个字体颜色为{{textColor}}的段落</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  }
}
</script>

在上面的例子中，最初textColor为red，而后修改为blue，则该段落文字的颜色也会相应地变为蓝色。

2. 计算属性式的style

这种方式和1相似，不同之处在于样式对象是通过计算属性返回的，可以在计算属性中加入复杂的逻辑，从而更加灵活地实现动态样式的更新：

<template>
  <div :style="textStyles">这是一个字体颜色为{{textColor}}的段落</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  },
  computed: {
    textStyles() {
      // 根据this.textColor的值返回不同的样式对象
      return {
        color: this.textColor
      }
    }
  }
}
</script>

在上面的例子中，textStyles是一个计算属性，根据this.textColor的值返回不同的样式对象。如果将this.textColor的值修改为blue，则该段落文字的颜色也会相应地变为蓝色。

示例说明

例1：鼠标移入移出按钮改变颜色

<template>
  <button 
    :style="{ backgroundColor: bgColor }" 
    @mouseover="bgColor = 'blue'" 
    @mouseout="bgColor = 'red'"
  >
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      buttonText: 'Hover me!',
      bgColor: 'red'
    }
  }
}
</script>

在上面的例子中，当鼠标移入按钮时，按钮的背景颜色将变为蓝色，当鼠标移出按钮时，按钮的背景颜色将恢复为红色。

例2：根据数据自动换行

<template>
  <div :style="textStyles">
    {{ content }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段比较长的文本，需要自动换行',
      maxLineWidth: 200
    }
  },
  computed: {
    textStyles() {
      let lineHeight = parseInt(getComputedStyle(document.body).getPropertyValue('line-height'))
      let lineCount = Math.ceil(this.content.length * 15 / this.maxLineWidth) // 每行大约需要15个文字
      return {
        lineHeight: lineHeight + 'px',
        height: lineHeight * lineCount + 'px'
      }
    }
  }
}
</script>

在上面的例子中，根据数据的内容动态计算出元素的高度，并同时设置行高。这样做可以实现在不同屏幕下自适应的效果。