可以使用
ElementUI 的 Tag 组件来实现这个需求，具体实现方式如下：
1. 在页面中引入
ElementUI 和
Vue.js：
```html
<!-- 引入
ElementUI 样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入
Vue.js 和
ElementUI -->
<script src="https://unpkg.com/
vue/dist/
vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
2. 在
Vue.js 的模板中添加
Checkbox 和 Tag 组件：
```html
<template>
<div>
<el-
checkbox-group v-model="checkedList" @change="handleChange">
<el-
checkbox label="选项1"></el-
checkbox>
<el-
checkbox label="选项2"></el-
checkbox>
<el-
checkbox label="选项3"></el-
checkbox>
</el-
checkbox-group>
<el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
</div>
</template>
```
3. 在
Vue.js 的 data 中定义 checkedList 和 tags 变量：
```javascript
data() {
return {
checkedList: [], // 选中的
多选框
tags: [] // 生成的标签
}
}
```
4. 在
Vue.js 的 methods 中添加 handleChange 函数，用于监听
多选框的变化并生成对应的标签：
```javascript
methods: {
handleChange(checkedList) {
this.tags = checkedList.map(label => {
return {
label: label,
type: 'success'
}
})
}
}
```
在 handleChange 函数中，首先将选中的
多选框保存到 checkedList 变量中，然后通过 map 方法将 checkedList 中的每一个选项转换成一个包含 label 和 type 属性的对象，最后将转换后的对象保存到 tags 变量中。
5. 最后，将
Vue.js 实例挂载到页面中：
```javascript
new
Vue({
el: '#app'
})
```
完整的代码如下：
```html
<template>
<div>
<el-
checkbox-group v-model="checkedList" @change="handleChange">
<el-
checkbox label="选项1"></el-
checkbox>
<el-
checkbox label="选项2"></el-
checkbox>
<el-
checkbox label="选项3"></el-
checkbox>
</el-
checkbox-group>
<el-tag v-for="(tag, index) in tags" :key="index">{{ tag.label }}</el-tag>
</div>
</template>
<script>
new
Vue({
el: '#app',
data() {
return {
checkedList: [],
tags: []
}
},
methods: {
handleChange(checkedList) {
this.tags = checkedList.map(label => {
return {
label: label,
type: 'success'
}
})
}
}
})
</script>
<style>
/* 可选的样式 */
.el-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
```
4815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
