Vue Tags Input

参考地址：http://www.vue-tags-input.com/#/
1.安装依赖

npm install @johmun/vue-tags-input

2.使用

<template><div><el-form-item label="博主链接" prop="url"><div><vue-tags-inputv-model="tag":tags="tags"@tags-changed="newTags => tags = newTags"placeholder="请填写博主链接"/></div></el-form-item></div>
</template><script>
import VueTagsInput from '@johmun/vue-tags-input';export default {components: {VueTagsInput,},data() {return {tag: '',tags: [],};},methods：{submitForm： function(formName){var arr = [];for (var i = 0; i < this.tags.length; i++) {arr.push(this.tags[i].text);}console.log(arr)//传给后台的数据处理一下， v-model="tag"的数据变成标签时为空取不到，}}
};
</script>

效果是这样子的：
（标签的样式自己添加覆盖框架本身的样式）

如果是将标签用字符，号拼接传给后台时

 for (var i = 0; i < this.tags.length; i++) {arr.push(this.tags[i].text);}for (var i = 0; i < arr.length; i++) {str += arr[i] + ",";}if (str.length > 0) {str = str.substr(0, str.length - 1);}console.log(str)//用，号拼接传给后台

编辑回显时要还原格式，不然会报Invalid prop: custom validator check failed for prop “tags”.这个错

 let arr = str.split(",");  //str是，号拼接返回来的数据let all = [];for (var i = 0; i < arr.length; i++) {all.push({ text: arr[i] });    //必须将它还原成[{text:'data1'},{text:'data2}]这种格式}this.tags = all;

Vue Tags Input相关推荐

vue函数input输入值即请求，优化为用户输入完成之后再请求
vue函数input输入值请求时延迟0.5秒请求目的:解决当用户连续输入连续请求接口的问题,达到当用户输入完成之后再请求. 函数防抖 <el-input v-model="selec ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录...
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
html input 的value变颜色,vue里input根据value改变背景色的实例
这篇文章主要为大家详细介绍了vue里input根据value改变背景色的实例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 1.首先定义两个不同 ...
vue实现input输入框控制最多输入一位小数
vue实现input输入框控制最多输入一位小数, 直接在校验规则中写上js正则表达式就行,表达式如下: /^(\d+\.\d{1,1}|\d+)$/
vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
vue里input根据value改变背景色
vue里input根据value改变背景色 1.首先定义两个不同的class .null-input .el-input__inner { background-color: rgba(255, 25 ...
vue.js html 属性赋值,vue.js input框之间赋值方法
vue.js input框之间赋值方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue.js input框之间赋值方法,编程之家小编 ...
vue 中 input事件
vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']&quo ...
vue基于 input 实现密码的显示与隐藏功能
目录前言: 一.准备图标二.Vue程序界面的展示三.代码总结: 前言: 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非 ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...

Vue Tags Input

Vue Tags Input

Vue Tags Input相关推荐

最新文章

热门文章