vue实现动态显示el-input内容及样式

要动态显示 el-input 组件的内容和样式，可以使用 Vue 的数据绑定功能和计算属性。

首先，在组件的 data 中定义一个变量来保存输入框的内容，例如：

data() {
  return {
    inputValue: ''
  }
}

接下来，在 el-input 组件中使用 v-model 指令将 inputValue 变量绑定到输入框上，例如：

<el-input v-model="inputValue"></el-input>

现在，每当用户在输入框中输入内容时，inputValue 变量将自动更新。

接下来，您可以使用计算属性来动态计算输入框的样式。例如，以下计算属性将返回一个对象，根据输入框的内容长度动态设置输入框的宽度：

computed: {
  inputStyle() {
    return {
      width: `${this.inputValue.length * 10}px`
    }
  }
}

最后，您可以将计算属性中返回的样式对象绑定到输入框的 style 属性上，例如：

<el-input v-model="inputValue" :style="inputStyle"></el-input>

现在，输入框的样式将根据输入框的内容长度自动调整。