在
layui 中引用
Vue 的动态编辑标签，可以通过以下步骤实现：
1. 在 HTML
中添加一个
layui 的表单元素，例如：
```html
<div class="
layui-form-item">
<label class="
layui-form-label">标签</label>
<div class="
layui-input-block">
<input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="
layui-input">
</div>
</div>
```
2. 在
Vue 实例
中，
使用 v-model 指令将表单元素与
Vue 组件
中的 data 绑定，例如：
```html
<div id="app">
<div class="
layui-form-item">
<label class="
layui-form-label">标签</label>
<div class="
layui-input-block">
<input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="
layui-input" v-model="tags">
</div>
</div>
</div>
<script>
new
Vue({
el: '#app',
data: {
tags: ''
}
})
</script>
```
3. 在
Vue 的 computed
中，将 tags 字符串转换为数组，并将数组
中的每个元素渲染为
layui 的 tag 标签，例如：
```html
<div id="app">
<div class="
layui-form-item">
<label class="
layui-form-label">标签</label>
<div class="
layui-input-block">
<input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="
layui-input" v-model="tags">
</div>
</div>
<div class="
layui-form-item
layui-show">
<label class="
layui-form-label">已选标签</label>
<div class="
layui-input-block">
<div class="
layui-form-mid
layui-word-aux tag-list">
<template v-for="tag in tagList">
<button class="
layui-btn
layui-btn-sm
layui-btn-primary">{{ tag }}</button>
</template>
</div>
</div>
</div>
</div>
<script>
new
Vue({
el: '#app',
data: {
tags: ''
},
computed: {
tagList() {
return this.tags.split(',')
}
}
})
</script>
```
这样，就实现了在
layui 中引用
Vue 的动态编辑标签的
效果。
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
