如何在element-ui中实现输入框中新输入的内容改变样式?

在使用 element-ui 的 input 输入框时，你可以通过以下几种方式来改变输入框的样式，使用 ::placeholder 选择器来改变默认提示文字的样式，使用 :focus 伪类选择器来改变输入框获得焦点时的样式。使用 v-bind:class 或 v-bind:style 来动态地改变输入框的类名和样式，例如根据输入的内容动态改变样式。自定义 element-ui 的 input 输入框的样式，例如改变输入框的边框颜色、字体大小等属性。不同的方式适合不同的需求，具体使用哪种方式可以根据实际情况来选择。

可以使用 ::placeholder 选择器来改变 input 输入框中的默认提示文字的样式。同时，使用 :focus 伪类选择器来改变输入框获得焦点时的样式。

以下是一个使用 element-ui 的 input 输入框，新输入的内容改变样式的例子：

<template>

<el-input v-model="inputValue" placeholder="请输入内容"></el-input>

</template>

<style>

/* 改变默认提示文字的样式 */

.el-input__inner::placeholder {

color: #999;

}

/* 改变输入框获得焦点时的样式 */

.el-input__inner:focus {

border-color: #409EFF;

box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);

}

</style>

在上面的例子中，使用了 ::placeholder 选择器来改变默认提示文字的颜色为灰色，使用 :focus 伪类选择器来改变输入框获得焦点时的边框颜色和阴影效果。当输入框中有新的内容输入时，输入框中的内容将会根据 el-input 的默认样式来改变样式。

还可以使用 v-bind:class 或 v-bind:style 来动态地改变 input 输入框的样式。例如，你可以绑定一个变量并在输入框中输入不同的值时来动态地改变输入框的样式。

以下是一个使用 element-ui 的 input 输入框，根据输入的内容动态改变样式的例子：

<template>

<el-input v-model="inputValue" :class="inputClass" :style="inputStyle" placeholder="请输入内容"></el-input>

</template>

<style>

/* 改变默认提示文字的样式 */

.el-input__inner::placeholder {

color: #999;

}

/* 改变输入框获得焦点时的样式 */

.el-input__inner:focus {

border-color: #409EFF;

box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);

}

/* 默认样式 */

.default-style {

color: #333;

font-size: 14px;

border-color: #dcdfe6;

}

/* 样式1 */

.style1 {

color: red;

font-size: 16px;

border-color: green;

}

/* 样式2 */

.style2 {

color: blue;

font-size: 18px;

border-color: yellow;

}

</style>

<script>

export default {

data() {

return {

inputValue: '',

inputClass: 'default-style',

inputStyle: {}

}

},

watch: {

inputValue(value) {

if (value === '样式1') {

this.inputClass = 'style1'

this.inputStyle = {

'background-color': '#f0f0f0'

}

} else if (value === '样式2') {

this.inputClass = 'style2'

this.inputStyle = {

'background-color': 'pink'

}

} else {

this.inputClass = 'default-style'

this.inputStyle = {}

}

}

}

}

</script>

这个例子中，采用 v-bind:class 和 v-bind:style 来动态地改变输入框的类名和样式。当输入框中的值为 样式1 时，输入框的类名将会变为 style1，并且背景色将会变为灰色。当输入框中的值为 样式2 时，输入框的类名将会变为 style2，并且背景色将会变为粉色。当输入框中的值为其他值时，输入框将会恢复为默认样式。