使用v-model、过滤器、v-bind实现：
1.文本框，输入a，div显示红色，
2.输入b，div显示蓝色，
3.输入其他字符，div显示绿色
该回答引用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 中显示。根据题目要求，过滤器并没有真正起到过滤的作用，而是将值转换后显示出来。
watch 监听 input值 然后做个if判断 。动态改变style 样式
如果使用了组件的话,就使用组件对应的方法
通过变量控制css