Vue-multiselect详解(Vue.js选择框解决方案)

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

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

运行效果:

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/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>

原文地址:https://www.cnblogs.com/DZzzz/p/9313497.html

时间: 2024-10-11 06:53:14

Vue-multiselect详解(Vue.js选择框解决方案)的相关文章

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用 通过Vue.component()去注册一个组件,你就可以全局地使用它了,具体体现在每个被new的 Vue 实例/注册组件, 的template选项属性或者对应的DOM模板中,去直接使用 注册组件 全局注册 例如,放在通过new创建的Vue实例当中: Vue.component('my-component', { template:

【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件 created钩子函数和beforeMount间的生命周期 对于created钩子函数和beforeMount间可能会让人感到有些迷惑,下面我就来解释一下: el选项的有无对生命周期过程

Vue 实例详解与生命周期

Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个 Vue 实例生成.编译.挂着.销毁等过程进行 js 控制. Vue 实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且 Vue 初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作

关于Vue.use()详解

关于Vue.use()详解 问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use(axios),就能直接使用.那这是为什么呐? 答案 因为 axios 没有 install. 什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件,看完之后就明白了. 定义组件 生成模版 vue init webpack-si

详解vue 路由跳转四种方式 (带参数)

详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name /

详解Node.js API系列C/C++ Addons(3) 程序实例

http://blog.whattoc.com/2013/09/08/nodejs_api_addon_3/ 再续前文,前文介绍了node.js 的addon用法和google v8 引擎,下面,我们进入真正的编码,下面将会通过六个例子,学习node addon 范例,了解addon编程的特性 创建一个空项目 随机数模块 向模块传递参数 回调函数处理 线程处理 对象管理 创建一个空项目 vi modulename.cpp #include <node.h> void RegisterModul

Redis详解(八)——企业级解决方案

Redis详解(八)--企业级解决方案 缓存预热 缓存预热就是系统上线后,提前将相关的缓存数据直接加载到缓存系统.避免在用户请求的时候,先查询数据库,然后再将数据缓存的问题!用户直接查询事先被预热的缓存数据! 缓存预热解决方案: 缓存雪崩 缓存雪崩就是在一个较短的时间内,缓存中较多的key集中过期 假设我们的缓存是在同一时间创建(如天猫双十一),然后设置的缓存时间是一置的, 这样到特定的时间就会出现缓存雪崩的情况, 此时若是有大量访问量的操作就会造成数据库服务器的压力过大. 缓存雪崩解决方案:

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

详解vue如何使用rules对表单字段进行校验

1.在代码中,添加属性::rule ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con">            <FormItem prop