<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框的值就好了
在Vue2中,el-input
是Element UI库中的一个组件,用于输入框的展示和交互。v-model
指令可以用于在Vue实例中绑定数据和组件的值,实现双向数据绑定。
在el-input
中使用v-model
指令,可以将输入框的值与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实例中的数据进行双向绑定了。
肯定没反应啊,你都没有绑定,在input里面v-model="inputValue" inputValue改成你的 (你data里面的名字和: '数据')
data() {
return {
inputValue: ''
}
}