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

有关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>

效果:

img

问题:

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

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

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

在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指令只能用于表单元素和自定义组件中。在使用自定义组件时,需要在组件中定义valueinput属性,分别用于接收和更新组件的值。

例如,自定义一个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实例中的数据进行双向绑定了。


肯定没反应啊,你都没有绑定,在input里面v-model="inputValue"         inputValue改成你的  (你data里面的名字和: '数据')
data() {
  return {
    inputValue: ''
  }
}