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. noipd2t3列队

    吉老师的题还真是难呢... 正解至今不会,只会平衡树的做法 这种用平衡树上一个点表示一段区间的题还真要做做...想起来挺难受的 建n棵平衡树表示每行的m-1个元素 再建一棵平衡树维护最后一列 中间要支 ...

  2. log4net调试

    public delegate void LogReceivedEventHandler(object source, LogReceivedEventArgs e); public sealed c ...

  3. C++STL 库中set容器应用

    #include<iostream> #include<cstdio> #include<set> using namespace std; set<int& ...

  4. HDOJ1075字典翻译（map应用）

    #include<iostream> #include<cstdio> #include<map> #include<string> #include& ...

  5. Python模块-logging模块(一)

    logging模块用来写日志文件 有5个级别,debug(),info(),warning(),error()和critical(),级别最高的为critical() debug()为调试模式,inf ...

  6. AVI编码器

    AVI编码器,AVI英文全称为Audio Video Interleaved,即音频视频交错格式.就是编码语音和影像同步组合在一起的文件格式.它对视频文件采用了一种有损压缩方式,但压缩比较高,因此尽管 ...

  7. SharePoint 2013 搜索高级配置

    SharePoint2013里面的搜索配置. 1.首先,新建页面,用于搜索, 2.添加搜索框.搜索结果部件: 选择<搜索>类别,找到”搜索框”.”搜索结果”两个部件,添加到页面: 3.配置 ...

  8. Flask11 Session、CSRF、注销session、利用端点自动跳转

    1 怎么对存储的cookie数据进行加密 利用response对象去设置cookie时,存储到浏览器中的cookie数据都是明文的,容易被一些计算机爱好者利用:利用session存的cookie数据可 ...

  9. Bind,Options读取配置到C#实例

    首先创建一个网站 Asp.net Core Mvc 空网站 起名叫做OptionsBindSample 通过Option和Bind将Json文件里面的配置转成C#里面的一个实体,相互之间映射起来 Bi ...

  10. shell脚本知识点汇总

    sed中在对内容进行修改时,有时候需要引用外部变量的值或者获取一个shell命令执行的结果,以便达到更加可观的输出结果 1.sed中使用变量替换1)sed命令使用双引号的情况下,使用$var直接引用[ ...