如何使用Vue将CSS宽度从50%修改为100%

方法一：动态绑定CSS类（推荐） #

通过布尔值控制目标元素添加/移除预设的宽幅类，是Vue中契合响应式思想的常规实现方式。

完整代码：

<template>
  <div id="theSpecial" :class="{ fullWidth: testBoolean }">Hello World Special</div>
  <button @click="changeWidth">Change width</button>
</template>

<script>
export default {
  data() {
    return {
      testBoolean: false,
    };
  },
  methods: {
    changeWidth() {
      this.testBoolean = !this.testBoolean; // 点击切换状态，也可直接设为true
    },
  },
};
</script>

<style>
#theSpecial {
  background-color: purple;
  color: white;
  width: 50%;
  transition: width 0.3s; /* 可选：添加过渡动画让变化更平滑 */
}

.fullWidth {
  width: 100%;
}
</style>

方法二：动态绑定内联样式 #

直接通过布尔值控制元素的width内联样式，适合简单的样式切换场景。

完整代码：

<template>
  <div id="theSpecial" :style="{ width: testBoolean ? '100%' : '50%' }">Hello World Special</div>
  <button @click="changeWidth">Change width</button>
</template>

<script>
export default {
  data() {
    return {
      testBoolean: false,
    };
  },
  methods: {
    changeWidth() {
      this.testBoolean = !this.testBoolean;
    },
  },
};
</script>

<style>
#theSpecial {
  background-color: purple;
  color: white;
  transition: width 0.3s;
}
</style>

方法三：直接操作DOM（不推荐） #

通过$refs获取目标元素后修改样式，这种方式违背Vue响应式设计理念，仅适合特殊场景使用。

完整代码：

<template>
  <div id="theSpecial" ref="specialDiv">Hello World Special</div>
  <button @click="changeWidth">Change width</button>
</template>

<script>
export default {
  methods: {
    changeWidth() {
      this.$refs.specialDiv.style.width = '100%';
    },
  },
};
</script>

<style>
#theSpecial {
  background-color: purple;
  color: white;
  width: 50%;
  transition: width 0.3s;
}
</style>

内容的提问来源于stack exchange，提问作者Meow