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. ACM学习历程—HDU 5023 A Corrupt Mayor's Performance Art（广州赛区网赛）（线段树）

    Problem Description Corrupt governors always find ways to get dirty money. Paint something, then sel ...

  2. powermock, 强力模拟

    1. powermock是基于mockito或者easymock,TestNG之上的mock: 2. 提供了对于静态函数,私有函数的mock 3. 下载地址:https://github.com/po ...

  3. OpenStack、CloudStack、Eucalyptus和vCloud Director四大主流云平台怎么选？

    软件产品开发公司Altoros Systems的IT基础设施设计师Vadim Truksha在美国<网络世界>上发表一篇文章,详细对比了CloudStack.Eucalyptus.vClo ...

  4. ABP源码学习目录

    ABP源码理解笔记 之前看过abp源码,但是时间久了很多也不记得了,所以近期打算重新看一遍,顺便做下笔记. 目录如下: Abp 框架启动流程分析 模块系统 依赖注入 模块配置 系统设置 工作单元的实现 ...

  5. MySQL绿色版的安装步骤

    由于工作需要最近要开始研究MySQL了(看来学习都是逼出来的),本人对mysql没有研究,可以说一个小白. 下面就从安装开始吧,虽然网上关于这方面的东西很多,还是需要自己把操作过程写下来. 1.数据库 ...

  6. NumberFormatException: For input string: "null"

    日志: [INFO-2016/08/04/16/:21/:25]ProjectCommonFormController.(78) - 审批[同意]入参-[string]commonFormDtoStr ...

  7. JAVA基础知识总结4（面向对象特征之一：封装）

    封 装:是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. 好处:将变化隔离:便于使用:提高重用性:安全性. 封装原则:将不需要对外提供的内容都隐藏起来,把属性都隐藏,提供公共方法对其访问. th ...

  8. [51nod1247]可能的路径(思维题)

    题意:给定(a,b),(x,y)  ,(a,b)可以通向(a-b,b) (a+b,b) (a,a+b) (a,a-b) 求能否到达(x,y) 解题关键:类似于更相减损,变换过程中gcd是一样的. #i ...

  9. (转)JAVA中的权限修饰符

    注:本博文是转载的,原文地址:http://blog.csdn.net/xk632172748/article/details/51755438 Java中修饰符总结: 访问控制修饰符 访问控制修饰符 ...

  10. Flask09 原始输出、转义、XSS攻击、过滤器???

    1 怎么在jinja模板中原始输出模板语法 1.1 用双引号引起来后放到 {{ }} 中 例如 {{ "{{}}" }} 输出 1.2 利用raw 例如 {% raw %} {% ...