有关element ui input组件的使用问题

Question

有关element ui input组件的使用问题

我的代码：

            <div>
                <div style="margin-top: 1%;"><div style="width:50%;float:left">时间间隔</div> <el-input  id="period" value="1 (ms)" size="mini" placeholder="请输入时间间隔" prefix-icon="el-icon-time" style="width:30%"></el-input></div>
                <div style="margin-top: 1%;"><div style="width:50%;float:left">执行次数</div><el-input  id="times" value="1" size="mini" placeholder="请输入时间间隔" prefix-icon="el-icon-collection-tag" style="width:30%"></el-input></div>
                <div style="margin-top: 1%;"><div style="width:50%;float:left">回显结果</div><select id="isshow" class="select" ><option>是</option><option>否</option></select></div>
                <el-button class="InsideBt" type="info" plain onclick="startScript()" style="float: right;">启动脚本</el-button>
            </div>

效果：

问题：

点击以后输入内容毫无反应；（我对vue不清除，就是想用一下组件，通过查看官方文档,显示：
Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。）
我也不是太明白是什么意思，请帮我解答一下谢谢。只要能实现这个功能就行，后续我也就是原生js获取一下input框的值就好了

Answer 1

在Vue2中，el-input是Element UI库中的一个组件，用于输入框的展示和交互。v-model指令可以用于在Vue实例中绑定数据和组件的值，实现双向数据绑定。

在el-input中使用v-model指令，可以将输入框的值与Vue实例中的数据进行绑定，实现数据的双向绑定。具体使用方法如下：

1. 在Vue实例中定义一个数据，用于存储输入框的值：

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

2，在el-input组件中使用v-model指令，将输入框的值与Vue实例中的数据进行绑定：

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

这样，当用户在输入框中输入内容时，inputValue的值会自动更新；当inputValue的值发生变化时，输入框中的内容也会自动更新。

需要注意的是，v-model指令只能用于表单元素和自定义组件中。在使用自定义组件时，需要在组件中定义value和input属性，分别用于接收和更新组件的值。

例如，自定义一个my-input组件：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>

在Vue实例中使用my-input组件，并绑定数据：

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

这样，my-input组件的值就可以与Vue实例中的数据进行双向绑定了。