详解基于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 相关文章推荐
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
原生js实现分页效果
Sep 23 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
用PHP实现WEB动态网页静态
2006/10/09 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
js实现筛选功能
2020/11/24 Javascript
通过python3实现投票功能代码实例
2019/09/26 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python中的时区问题
2021/01/14 Python
python 对xml解析的示例
2021/02/27 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
如何使用PHP session
2015/04/21 面试题
医学生自荐信
2013/12/03 职场文书
自我评价200字分享
2013/12/17 职场文书
聚美优品广告词改编
2014/03/14 职场文书
高中物理教学反思
2016/02/19 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电