Vue.js动态样式设置求助：类名绑定无效及样式切换问题

问题1：类名绑定始终显示为user #

你当前用:class="{user}"是对象语法，这里的user会被解析为类名的键，而非变量值。正确做法是直接绑定变量（字符串语法）：

• 在Vue实例中声明user变量，初始为空
• setUser方法接收输入事件，将event.target.value赋值给user
• 把:class="{user}"改成:class="user"

问题2：点击按钮切换显示隐藏 #

通过状态变量控制类名切换，结合点击事件实现toggle逻辑：

• 声明isVisible变量，初始为true（默认显示）
• 给按钮添加@click="isVisible = !isVisible"事件
• 给目标段落绑定:class="isVisible ? 'visible' : 'hidden'"（或对象语法:class="{visible: isVisible, hidden: !isVisible}"）

问题3：输入框设置内联背景色 #

用v-model绑定输入框值，再通过:style动态绑定内联样式：

• 声明bgColor变量，初始为空
• 给输入框添加v-model="bgColor"
• 给目标段落添加:style="{ backgroundColor: bgColor }"

完整代码示例 #

<section id="assignment">
  <!-- 1) 输入值作为CSS类 -->
  <input type="text" v-on:input="setUser" />
  <!-- 可用类："user1", "user2" -->
  <p :class="user" :class="isVisible ? 'visible' : 'hidden'">
    Style me!
  </p>
  <button @click="isVisible = !isVisible">Toggle Paragraph</button>

  <!-- 3) 动态内联样式设置背景色 -->
  <input type="text" v-model="bgColor" placeholder="输入背景色，比如red或#ff0000" />
  <p :style="{ backgroundColor: bgColor }">Style me inline!</p>
</section>

<script>
new Vue({
  el: '#assignment',
  data() {
    return {
      user: '',
      isVisible: true,
      bgColor: ''
    }
  },
  methods: {
    setUser(event) {
      this.user = event.target.value;
    }
  }
})
</script>

<style>
.user1 {
  color: blue;
  font-size: 1.2rem;
}
.user2 {
  color: green;
  font-weight: bold;
}
.visible {
  display: block;
}
.hidden {
  display: none;
}
</style>

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