详解基于Vue的支持数据双向绑定的select组件


Posted in Javascript onSeptember 02, 2019

今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select

使用方法:

引入组件:

import VueSelect from '../components/VueSelect'

注册组件

export default {
  components: {
    VueSelect
  }
}

使用组件

<template>
  <vue-select
   :options="options"
   name="name"
   value="id"
   placeholder="请选择类型"
   v-model="selected_id"
   @change="handleChange">
  </vue-select>
</template>
  • options:选择项列表;
  • name:选择项列表中选择项名称的属性名;
  • value:选择项列表中选择项的值的属性名;
  • v-model:对应双向绑定的选中后的值;
  • @change:选择发生改变后触发事件,回调参数:当前选项。

DEMO:

<template>
  <div>
     <vue-select
    :options="options"
    name="name"
    value="id"
    placeholder="请选择一个水果"
    v-model="selected_id"
    @change="handleChange">
    </vue-select>
  </div>
</template>

<script>
import VueSelect from '../components/VueSelect'
export default {
  name: "Index",
  data() {
    return {
      selected_id: "",
      options: [
        {name: "苹果", id: 1},
        {name: "橘子", id: 2},
        {name: "香蕉", id: 3},
        {name: "西瓜", id: 4},
      ]
    }
  },
  components: {
    VueSelect
  },
  methods: {
    handleChange(e) {
      console.log(e)
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
解决layui checkbox 提交多个值的问题
Sep 02 #Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 #Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python 等差数列末项计算方式
2020/05/03 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
某公司面试题
2012/03/05 面试题
室内设计自我鉴定
2013/10/15 职场文书
客服实习的个人自我鉴定
2013/10/20 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
招聘专员岗位职责
2014/03/07 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
大学生个人学习总结
2015/02/15 职场文书
销售经理工作检讨书
2015/02/19 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
Vue.Draggable实现交换位置
2022/04/07 Vue.js