前端做几个按钮,点击按钮时,按钮的值可以动态加到input后面用elment组件
时间: 2024-02-28 10:57:21 浏览: 26
好的,我可以给你一些思路,你可以根据自己的实际情况进行调整。
首先,你可以使用 `el-button` 组件来创建按钮,然后在按钮上添加 `@click` 事件,将按钮的值动态添加到对应的 `el-input` 组件中。
举个例子,假设你有两个按钮:一个是 "Hello",另一个是 "World",你想在点击这两个按钮时,将它们的值添加到一个 `el-input` 组件中。
那么你可以这样做:
```html
<template>
<div>
<el-input v-model="inputValue"></el-input>
<el-button @click="addText('Hello')">Hello</el-button>
<el-button @click="addText('World')">World</el-button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
addText(text) {
this.inputValue += text;
},
},
};
</script>
```
在上面的代码中,我们首先创建了一个 `el-input` 组件,并将它的值绑定到了 `inputValue` 变量上。然后我们创建了两个按钮,分别是 "Hello" 和 "World",并在它们上面添加了 `@click` 事件,当点击按钮时,会触发 `addText` 方法,将按钮的值动态添加到 `inputValue` 变量中。
最后,你可以根据自己的实际情况进行调整,比如修改按钮的样式、修改输入框的默认值等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)