详解基于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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
js实现异步循环实现代码
Feb 16 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
php页面消耗内存过大的处理办法
2013/03/18 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS 统计时间
2021/03/09 Javascript
javascript中length属性的探索
2011/07/31 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python线程指南详细介绍
2017/01/05 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现对输入的密文加密
2019/03/20 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
学生会竞选演讲稿
2014/04/24 职场文书
和谐社区口号
2014/06/19 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
Python字符串格式化方式
2022/04/07 Python