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

2024-12-21 08:30:47

今天用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解vuejs2.0 select 动态绑定下拉框支持多选

select 下拉选择产品类型:这一项是select 涉及到父子组件信息传递下面拆开讲解父组件 <div class="sales-board-line"> <div class="sales-board-line-left"> 产品类型: </div> <div class="sales-board-line-right"> <v-selection :selections="
vue.js select下拉框绑定和取值方法

最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="
详解基于Vue的支持数据双向绑定的select组件

今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }
详解基于Vue cli开发修改外部组件Vant默认样式

前言在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制提示:以下是本篇文章正文内容,下面案例可供参考一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s
全面解析vue中的数据双向绑定

1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable
vue实现简单数据双向绑定

本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性
详解基于vue的移动web app页面缓存解决方案

现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为后退时恢复之前的页面笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
详解基于vue的服务端渲染框架NUXT

Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用
浅谈vue,angular,react数据双向绑定原理分析

传统做法前端维护状态,手动操作DOM更新视图.前端框架对服务器数据通过模版进行渲染.当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新. 框架帮忙分离数据和视图,后续状态更新需要手动操作DOM,因为框架只管首次渲染,不追踪状态监听变化. 双向数据绑定当我们在前端开发中采用MV*的模式时,M - model,指的是模型,也就是数据,V - view,指的是视图,也就是页面展现的部分.通常,我们需要编写代码,将从服务器获取的数据进行"渲染&qu
详解基于Vue+Koa的pm2配置

目前使用的技术栈是:前端Vue.后端Koa.数据库Mongodb. 然而每当起服务的时候,都要 npm start . node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦. 而且因为我使用的是koa,也没有使用狼叔写的koa脚手架.是自己基于廖雪峰老师的 Koa框架改的一个小型mvc.导致没有热更新. 为了简化这种没必要的操作及增加热更新,开始想怎么进行优化.于是选择了 pm2 配置pm2 先安装pm2: npm i pm2 . npm i pm2 -g
详解基于Vue cli生成的Vue项目的webpack4升级

前面的话本文将详细介绍从webpack3到webpack4的升级过程概述相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web
详解基于Vue，Nginx的前后端不分离部署教程

有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

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

相关推荐

随机推荐