当文本在input - vue.js中时更改图标的颜色

，可以通过以下步骤实现：

1. 首先，需要在Vue.js的组件中使用v-model指令绑定input的值，使得文本输入能够实时更新到Vue的数据模型中。

<template>
  <div>
    <input v-model="textInput" type="text">
    <i :class="{ 'fa': true, 'fa-check': textInput.length > 0, 'green-icon': textInput.length > 0, 'fa-close': textInput.length === 0, 'red-icon': textInput.length === 0 }"></i>
  </div>
</template>

1. 在Vue的组件中使用条件渲染和动态绑定class的方式来更改图标的颜色。这里使用了Font Awesome字体图标库，可以根据文本输入的情况来决定图标的颜色。
2. 在CSS中定义不同颜色的图标样式。这里以.green-icon和.red-icon为例：

.green-icon {
  color: green;
}

.red-icon {
  color: red;
}

这样，当文本输入框中有内容时，图标会显示为绿色，表示输入有效；当文本输入框为空时，图标会显示为红色，表示输入无效。

值得注意的是，本答案中提到了Font Awesome字体图标库作为示例，但并没有直接给出推荐的腾讯云相关产品和产品介绍链接地址。对于该问题，腾讯云可能提供与图标样式相关的云服务或解决方案，但我无法提供具体信息。请您参考腾讯云官方文档或咨询腾讯云支持团队以获取更准确的信息。