Question

我真的是Vue JS的新手。一旦将值更新为空或''，是否可以更改输入字段的背景色？现在，下面的代码由 teamfetch 的预定义值组成，即123456，当输入字段由值组成时，它将背景颜色显示为 GREEN ，这是正确的。但是，当我单击 @click：teamfetch 事件时，它会将teamfetch的值更新为空或''，但是该输入字段的背景色未更改为 WHITE >或 GRAY 。

在输入字段为空时如何将其背景颜色更改为白色？

查看

<b-form-input v-model="teamfetch" v-on:input="postdata($event,
 index)" :style="teamfetch ? { 'background-color': '#33FF90', color:'#33FF90' } : null"></b-form-input>

<b-icon icon="trash-fill" font-scale="1.5" @click="teamfetch='' " ></b-icon>

脚本

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'
Vue.use(BootstrapVueIcons)

data() {
  return {
   teamfetch: '123456'
  }
}

Answer 1

您可以有条件地绑定样式，这是我认为您现在正在尝试的样式，但是类似

<b-form-input v-model="teamfetch" v-on:input="postdata($event, index)" :stlye="teamfetch ? {'background-color': '#33FF90', color:'#33FF90'} : {'background-color': white}></b-form-input>

Answer 2

我会将您的功能扩展到一种方法中进行清理，然后将CSS动态绑定到您的div。

设置您的点击以更改颜色

<b-icon icon="trash-fill" font-scale="1.5" @click="setColour()" ></b-icon>

然后在数据中，您将有一个dataColour选项

现在您将在setColour()函数中设置正确的颜色；

setColour(textColour) {
     this.dataColour = textColour
    },

从那里，您可以从b-form-input元素调用getColour（）函数。

<b-form-input v-model="teamfetch" v-on:input="postdata($event,
 index)" :style="[getColour()]">
</b-form-input>

现在在您的方法中，您可以声明此方法，该方法将返回刚刚在上面设置的正确颜色

getColour(textColour) {
      return {
        color: this.dataColour,
      };
    },

Vue on button单击更改背景颜色

2 个答案: