vue中，el-input输入的内容失焦改变颜色怎么写

可以利用 `v-model` 指令绑定输入框的值，然后利用 `@blur` 监听输入框的失焦事件，触发回调函数改变样式。

示例代码：

<template>
  <div>
    <el-input v-model="inputValue" @blur="changeColor"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    changeColor() {
      document.querySelector('.el-input__inner').style.backgroundColor = 'lightgray'
    }
  }
}
</script>

<style>
.el-input__inner {
  transition: background-color 0.3s ease-in-out;
}
</style>

在上面的代码中，我们监听了输入框的失焦事件 `@blur`，并且在回调函数 `changeColor` 中改变了输入框的样式，使其背景颜色变为灰色。同时，我们使用了 CSS 的过渡动画效果来使颜色变化更加平滑。

相关问题

vue2 el-input disabled怎么修改placeholder颜色

你可以通过下面的 CSS 代码来修改禁用状态下的 placeholder 颜色：

.el-input.is-disabled .el-input__placeholder{
  color: #999; /* 你想要的颜色 */
}

在这个代码中，`.el-input.is-disabled` 选择器选择了禁用状态下的输入框，`.el-input__placeholder` 选择器选择了 placeholder 文本。你可以修改 `color` 属性的值来改变 placeholder 的颜色。

vue2 el-input type=textarea disabled怎么修改placeholder颜色

对于 `type='textarea'` 的 `el-input` 组件，你可以通过下面的 CSS 代码来修改禁用状态下的 placeholder 颜色：

.el-input.is-disabled textarea::-webkit-input-placeholder {
  color: #999; /* 你想要的颜色 */
}

.el-input.is-disabled textarea::-moz-placeholder {
  color: #999; /* 你想要的颜色 */
}

.el-input.is-disabled textarea:-ms-input-placeholder {
  color: #999; /* 你想要的颜色 */
}

在这个代码中，`.el-input.is-disabled` 选择器选择了禁用状态下的输入框，`textarea::-webkit-input-placeholder`、`textarea::-moz-placeholder` 和 `textarea:-ms-input-placeholder` 选择器分别选择了不同浏览器中的 placeholder 文本。你可以修改 `color` 属性的值来改变 placeholder 的颜色。