获取el-input 输入的内容

要获取el-input输入的内容，可以使用Vue.js中的双向数据绑定和ref属性。

首先，在el-input标签中添加ref属性：

<el-input ref="inputContent" v-model="content"></el-input>

其中，v-model绑定了输入内容到Vue实例的content属性上，ref属性值为"inputContent"，可以在Vue实例中通过this.$refs.inputContent来获取el-input组件实例。

然后，可以在Vue实例中使用以下代码获取输入内容：

let inputContent = this.$refs.inputContent.$refs.input.value;

其中，$refs.inputContent获取到el-input组件实例，$refs.input获取到实际的输入框DOM元素，value属性获取到输入内容。

相关问题

el-input输入内容变色

对于 `el-input`，你可以使用 Vue.js 来实现输入框中输入内容变色的效果。以下是一个示例：

HTML 代码：

<template>
  <div>
    <el-input v-model="text" @input="handleInput" :value="coloredText" ref="input"></el-input>
  </div>
</template>

JavaScript 代码：

<script>
export default {
  data() {
    return {
      text: '',
      coloredText: '',
    };
  },
  methods: {
    handleInput() {
      // 获取输入框中的文本内容
      var text = this.text;
      
      // 将文本内容的前三个字符变为红色
      var coloredText = '<span style="color: red;">' + text.substr(0, 3) + '</span>' + text.substr(3);
      
      // 将变色后的文本内容设置为 coloredText
      this.coloredText = coloredText;
    },
  },
};
</script>

在 JavaScript 代码中，我们监听了 `el-input` 的输入事件 `input`，当输入框中的文本内容发生变化时，将前三个字符变为红色，并将变色后的文本内容设置为 `coloredText`。然后在 `el-input` 组件上绑定 `v-model` 来实现输入框值的双向绑定，同时将 `coloredText` 绑定到 `el-input` 的 `value` 属性上，使输入框中显示变色后的文本内容。你可以根据你的实际需求来修改变色的逻辑。

Element Plus 获取el-input 的内容值

要获取 `el-input` 的内容值，可以使用 `v-model` 绑定输入的值，然后在 Vue 实例中访问绑定的数据即可。例如：

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  mounted() {
    console.log(this.inputValue); // 获取输入框的内容值
  }
};
</script>

在上面的示例中，我们使用 `v-model` 将输入框的值绑定到 `inputValue` 数据上，然后在 `mounted` 钩子函数中就可以通过 `this.inputValue` 来获取输入框的内容值了。