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. 【leetcode刷题笔记】ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  2. Arc077_E Guruguru

    传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...

  3. 启用Linux云平台oracle数据库实口令复杂性函数：PASSWORD_VERIFY_FUNCTION=NULL

    第一步:采用putty.exe登录数据库服务器. 输入IP后点击“Open”按钮: 第二步:登录对应的数据库实例. 执行:# su – oracle 查找:$ps -ef | grep pmon 找到 ...

  4. Metaspoit的使用

    一.环境的使用和搭建 首先我的攻击机和靶机都搭建在虚拟机上,选用的是VMware Workstation Pro虚拟机. 攻击机选用的是Linux kali 2017.2版本,而靶机安装的是XP sp ...

  5. windows 2013 datacenter 安装sql server2008 r2兼容性

    add-windowsfeature RSAT-Clustering-AutomationServer

  6. ZOJ1610(经典线段树涂色问题)

    Description Painting some colored segments on a line, some previously painted segments may be covere ...

  7. HDOJ1671(字符串前缀匹配)

    #include<iostream> #include<cstdio> #include<string> #include<vector> #inclu ...

  8. LAMP 1.2 Apache编译安装

    1.下载                                                                                                 ...

  9. Spring, Hibernate and Oracle Stored Procedures

    一篇英文博文,写的是利用hibernate处理存储过程中的游标等等: Motivation: While there are a few resources available online for ...

  10. groupadd添加新组

    一.groupadd命令用于将新组加入系统. 格式groupadd [-g gid] [-o]] [-r] [-f] groupname 主要参数 -g gid:指定组ID号. -o:允许组ID号,不 ...