点击按钮将el-input的数据展示
时间: 2023-11-09 20:17:02 浏览: 81
可以使用Vue.js中的双向绑定来实现将el-input的数据展示的功能。具体做法如下:
1. 在Vue.js组件的template中添加一个el-input输入框,并使用v-model指令将输入框的值绑定到组件的data属性中。
```
<el-input v-model="inputValue"></el-input>
```
2. 添加一个按钮,当点击该按钮时,将输入框的值展示到页面上。
```
<el-button @click="showInputValue">展示输入框的值</el-button>
```
3. 在组件的methods中实现showInputValue方法,将输入框的值赋值给另一个data属性,用于展示在页面上。
```
methods: {
showInputValue() {
this.showValue = this.inputValue;
}
}
```
4. 在页面中添加一个div标签,用于展示输入框的值。
```
<div>输入框的值为:{{showValue}}</div>
```
完整的示例代码如下:
```
<template>
<div>
<el-input v-model="inputValue"></el-input>
<el-button @click="showInputValue">展示输入框的值</el-button>
<div>输入框的值为:{{showValue}}</div>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
showValue: ''
}
},
methods: {
showInputValue() {
this.showValue = this.inputValue;
}
}
}
</script>
```
阅读全文