vue 绑定获取新值时切换旧的值样式

可以通过监听数据的变化，并在变化时动态改变样式来实现。具体做法如下：

1. 在 `data` 中定义需要绑定的值以及样式类名

data() {
  return {
    inputValue: '',
    oldInputValueClass: ''
  }
}

2. 在模板中绑定值，并为其设置样式类

<input type="text" v-model="inputValue" :class="oldInputValueClass">

3. 监听数据变化，如果 `inputValue` 变化，则切换样式类

watch: {
  inputValue(newValue, oldValue) {
    this.oldInputValueClass = 'old-value';
  }
}

4. 在 CSS 中定义 `old-value` 样式类

.old-value {
  color: #ccc;
}

这样，当 `inputValue` 的值发生变化时，就会给旧的值添加上 `old-value` 样式类，从而实现切换旧的值样式的效果。

相关问题

vue 获取新值时切换新值样式

你可以使用 Vue 的计算属性来实现此功能。首先，你需要绑定一个变量来表示当前的值，例如：

<template>
  <div>
    <button @click="toggleValue">Toggle Value</button>
    <p :class="valueClass">{{ value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  },
  methods: {
    toggleValue() {
      this.value = !this.value
    }
  },
  computed: {
    valueClass() {
      return {
        'value--active': this.value,
        'value--inactive': !this.value
      }
    }
  }
}
</script>

<style>
.value--active {
  color: green;
}
.value--inactive {
  color: red;
}
</style>

在上面的代码中，我们绑定了一个变量 `value` 来表示当前的值，当点击按钮时会切换该值。然后，我们定义了一个计算属性 `valueClass`，该属性会根据 `value` 的值返回一个对象，该对象的属性名对应着不同的样式类名。最后，我们在模板中使用 `:class` 来动态绑定样式类，这样就可以实现在切换值时切换样式的效果了。

vue 绑定切换样式

你可以使用 Vue 的条件渲染和绑定 class 属性来实现切换样式。例如：

<template>
  <div :class="{ active: isActive }">
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>

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

<style>
.active {
  background-color: red;
  color: white;
}
</style>

这里使用了 `:class` 绑定了一个对象，对象的 key 是类名，value 是一个布尔值，表示是否添加该类名。点击按钮时，会调用 `toggleActive` 方法来切换 `isActive` 的值，从而动态修改样式。