github地址：https://github.com/shentao/vue-multiselect

官网链接：https://vue-multiselect.js.org/#sub-getting-started

以下代码，可以直接建一个html文件，运行看到效果：

运行效果：

图片：

直接复制粘贴会出来效果：

<!DOCTYPE html>

<html>

<head>

  <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>

  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style>

  * {

  font-family: 'Lato', 'Avenir', sans-serif;

}

  </style>

</head>

<body>

  <div id="app">

    <multiselect

      v-model="value"

      :options="options"

      :multiple="true"

      :taggable="true"

      :searchable="true"

      @tag="addLibrary"

      >

    </multiselect>

  </div>

  <script>

  new Vue({

    components: {

      Multiselect: window.VueMultiselect.default

    },

    data: {

      value: ['Vue-Multiselect'],

      options: ['Vue.js', 'Vue-Multiselect', 'Vuelidate','Vuelidate1','Vuelidate2']

    },

  methods: {

      addLibrary(lib) {

        this.options.push(lib)

      this.value.push(lib)

    }

  }

}).$mount('#app')

  </script>

</body>

</html>

另一种方式：

<template>

    <div>

        <multiselect v-model="value" :options="options"></multiselect>

    </div>

</template>

<script>

    import Multiselect from 'vue-multiselect'

    export default {

        components: {

            Multiselect

        },

        data () {

            return {

                value: '',

                options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']

            }

        }

    }

</script>

<style src="../../dist/vue-multiselect.min.css"></style>

好了，有了前面的栗子做铺垫，可以轻松的根据自己的需求去看官网的链接了：

官网链接：https://vue-multiselect.js.org/#sub-getting-started

注意点：一定要注意vue-multiselect的版本号，否则会报很多错误：如下图：

cnpm install vue-multiselect@2.1.0 (注明今日实践这个版本不报错)

cnpm install vue-multiselect@1.5.01(注明今日实践这个版本报错)

报错页面：

Vue-multiselect详解（Vue.js选择框解决方案）的更多相关文章

  1. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  2. 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  3. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  4. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  5. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  6. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  7. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  8. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  9. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

随机推荐

  1. ffmpeg第三方库编译记录

    最近在研究ffmpeg的编译,之前使用的Ubuntu,需要安装虚拟机,非常麻烦,所以后来改研究在Windows平台编译. 一开始遇到很多挫折,参考了网上很多的帖子,但要么不全要么内容已过期,经过我的反 ...

  2. Agc003_D AntiCube

    传送门 题目大意 给定$N$个数,求一个最大的子集,使得任意两两的乘积不是一个完全立方数. $n\leq 10^5 A_i\leq 10^{10}$ 题解 考虑两两乘积为$x^3$,由于$x^3\le ...

  3. Gym - 100570B ：ShortestPath Query（SPFA及其优化）

    题意:给定N点M边的有向图,每条边有距离和颜色,一条有效路径上不能有相邻的边颜色相同.现在给定起点S,多次讯问S到点X的最短有效距离. TLE思路:用二维状态dis(u,c)表示起点到u,最后一条边的 ...

  4. ACM学习历程—广东工业大学2016校赛决赛－网络赛C wintermelon的魔界寻路之旅(最短路 && 递推)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=2 题目由于要找对称的路径,那么狠明显可以把右下角的每一块加到左上角对应的每 ...

  5. ACM学习历程—BestCoder Round #75

    1001:King's Cake(数论) http://acm.hdu.edu.cn/showproblem.php?pid=5640 这题有点辗转相除的意思.基本没有什么坑点. 代码: #inclu ...

  6. ACM学习历程—HDU 5512 Pagodas（数学）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5512 学习菊苣的博客,只粘链接,不粘题目描述了. 题目大意就是给了初始的集合{a, b},然后取集合里 ...

  7. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  8. JS数组的sort排序

    数组sort方法排序var aa=[6,2,1,5]//默认是从小到大排序aa.sort()[1, 2, 5, 6] //下面也是从小到大排序aa.sort(function(a,b){return ...

  9. 2008上交:Day of Week

    题目描述: We now use the Gregorian style of dating in Russia. The leap years are years with number divis ...

  10. 人物-IT-史玉柱：史玉柱

    ylbtech-人物-IT-史玉柱:史玉柱 史玉柱,1962年9月15日生于安徽省蚌埠市怀远县,商人.企业家. 1984年从浙江大学数学系本科毕业,分配至安徽省统计局工作.1989年深圳大学软件科学系 ...