Vue 属性操作 动态样式 动态style样式 Day02

在Vue中，你可以使用绑定的样式对象来动态地设置元素的样式。这里是一个简单的例子，展示如何根据组件的数据动态更新样式：

<template>
  <div id="app">
    <div :style="divStyle">我是一个文本框</div>
    <button @click="changeStyle">点击我改变样式</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  computed: {
    divStyle() {
      return {
        color: this.isActive ? 'green' : 'red',
        fontSize: this.isActive ? '20px' : '14px',
      };
    },
  },
  methods: {
    changeStyle() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

在这个例子中，divStyle是一个计算属性，它返回一个对象，该对象包含color和fontSize属性。这些属性的值取决于isActive数据属性。当点击按钮时，changeStyle方法会被调用，切换isActive的值，从而动态更新样式。