如何用vue把写好的一些标签往el-input里面放
时间: 2023-11-07 16:19:42 浏览: 42
您可以使用 `v-model` 指令来在 Vue 中绑定 `el-input` 组件的输入值,并且使用 `v-bind` 指令来动态绑定 `el-input` 组件的属性。例如,如果您想把一些标签放入 `el-input` 组件中,可以使用以下代码:
```html
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入标签" />
<div class="tag-list">
<el-tag v-for="tag in tagList" :key="tag" :closable="true" @close="removeTag(tag)">{{ tag }}</el-tag>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
tagList: [], // 存储标签列表
};
},
methods: {
addTag() {
if (this.inputValue && this.tagList.indexOf(this.inputValue) === -1) {
this.tagList.push(this.inputValue);
this.inputValue = '';
}
},
removeTag(tag) {
const index = this.tagList.indexOf(tag);
if (index !== -1) {
this.tagList.splice(index, 1);
}
},
},
};
</script>
```
在上面的示例中,我们使用了 `v-model` 指令将 `inputValue` 绑定到 `el-input` 组件的输入值上,这样用户输入的值就可以动态地保存在 `inputValue` 变量中。我们也使用了 `v-for` 指令来循环渲染 `tagList` 数组中的标签,并使用 `v-bind` 指令动态地绑定 `el-tag` 组件的 `closable` 属性,这个属性控制标签是否可关闭。当用户点击标签的关闭图标时,`@close` 事件会触发 `removeTag` 方法,该方法会从 `tagList` 数组中删除对应的标签。当用户在 `el-input` 组件中输入文本并按下回车键时,`addTag` 方法会向 `tagList` 数组中添加一个新标签,并清空输入框的值。
这样,当用户输入标签时,它们就会被添加到 `tagList` 数组中,并使用 `v-for` 指令循环渲染到页面上。同时,用户也可以通过点击标签的关闭图标来删除标签。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)