Vue求帅哥美女解答🥺

Question

使用v-model、过滤器、v-bind实现：

1.文本框，输入a，div显示红色，

2.输入b，div显示蓝色，

3.输入其他字符，div显示绿色

Answer 1

该回答引用ChatGPT

可以使用如下代码实现要求：

<template>
  <div>
    <label>请输入字符：</label>
    <input type="text" v-model="inputValue">
    <div v-bind:style="{ color: textColor }">
      {{ inputValue | colorFilter }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      textColor: '',
    };
  },
  methods: {
    setColor() {
      if (this.inputValue === 'a') {
        this.textColor = 'red';
      } else if (this.inputValue === 'b') {
        this.textColor = 'blue';
      } else {
        this.textColor = 'green';
      }
    },
  },
  filters: {
    colorFilter(value) {
      return value.toUpperCase();
    },
  },
  watch: {
    inputValue() {
      this.setColor();
    },
  },
};
</script>

首先在模板中使用 v-model 将输入框的值绑定到 inputValue 数据上。然后在 div 中使用 v-bind 动态绑定样式的颜色，这里使用了一个 textColor 数据来表示要显示的颜色。

接下来定义一个 setColor 方法，根据输入框的值来设置 textColor 的值，以确定要显示的颜色。在 watch 属性中，监听 inputValue 数据的变化，并在数据变化时自动调用 setColor 方法。

最后，我们使用一个 colorFilter 过滤器来将输入框的值转换为大写，并在 div 中显示。根据题目要求，过滤器并没有真正起到过滤的作用，而是将值转换后显示出来。