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. 三种 Failover 之 Client-Side Connect time Failover、Client-Side TAF、Service-Side TAF

    三种 Failover 之 Client-Side Connect time Failover.Client-Side TAF.Service-Side TAF 理论背景 Oracle  RAC 同时 ...

  2. 制作spark镜像

    构建镜像 添加jdk引用(可以使用yum进行安装): 安装SSH 碰到一个问题,执行systemctl的时候发生了异常: Failed to get D-Bus connection 解决这个问题的方 ...

  3. android开发 解析服务器端xml文件数据存储到android客户端SQLite数据库

    以下面xml文件为例对其解析(假设此xml就在服务器端Server项目下的servlet包下的MenuServlet文件的输出流中): <?xml version="1.0" ...

  4. Java常见设计模式之工厂模式

    工厂模式在我们日常的应用中应当算是比较广泛的一种设计模式了.今天让我们一起来学习一下,工厂的设计模式. 工厂模式在<Java与模式>中分为三类:     1)简单工厂模式(Simple F ...

  5. UML核心元素--分析类

    分析类共有三个:边界类(boundary).控制类(control)和实体类(entity),这些分析类都是类的版型.分析类是跨越需求到设计实现的桥梁. 边界类:从需求向现实的转换过程中,任何两个有交 ...

  6. js---复选框（全选，不选，反选）demo1--

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. ng2-升级脚手架到最新版本

    //先卸载,后安装 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest

  8. Python-Redis的String操作

    Ubuntu安装Redis sch01ar@ubuntu:~$ sudo apt install redis-server sch01ar@ubuntu:~$ redis-server sch01ar ...

  9. numpy和matlab计算协方差矩阵的不同（matlab是标准的，numpy相当于转置后计算）

    matlab是标准的,numpy相当于转置后计算 >> x = [2,0,-1.4;2.2,0.2,-1.5;2.4,0.1,-1;1.9,0,-1.2] x = 2.0000    0 ...

  10. 【255】◀▶IEW-Unit20

    Unit 20 Environment: Tourism I.定语从句及分词在雅思写作中的运用 定语从句: 1. 先行词 2. 关系词:关系代词.关系副词 3. 非限制性定语从句 4. 分词和定语从句 ...