1.整合了第三方 jQuery 插件 (select2)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/select2/select2.min.css" /> <style> html, body { font: 13px/18px sans-serif; } select { min-width: 300px; } </style> </head> <body> <div id="el"> <p>选中的: {{ selected }}</p> <select2 :options="options" v-model="selected"></select2> </div> <script src="...
业务：消息推送方式有两种，为“微信”和“邮件”，微信发送时需要选择“要发送的应用程序”，邮件发送时不需要 微信发送时，页面如下：邮件发送时，选择器不可用，页面如下：虽然官网上没有给出具体的例子，但可从属性中查到 “disabled”属性，属性说明类型默认值disabled是否禁用Booleanfalse 实现： 添加disabled属性，写成如下红色标记格式；定义一个isAble变量，用来存放TRUE和FALSE值，决定此选择框是否可用。 <Select <s...
如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <label id="app"> <select v-model="selected" ><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option> </select> <span>Selected: {{ selected }}</span> </label> <script> new Vue({el: #app,data: {select...
目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。 知识点： 组件的写法及运用 组件之间的数据传递（props的运用） 组件之间的数据传递（$emit的运用） 动态数据的绑定（v-bind） 自定义事件通信 效果图： 1、未做任何操作前，下拉列表为隐藏状态2、点击输入框显示下拉列表3、 点击列表项，输入框值跟随改变PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表html代码： <!DOCTYPE html> <html> <...
先上代码： //... <body><div id="qwe"><select v-model="selected"><option v-for="item in da" :value="item.value">{{item.value}}</option></select><span>{{selected}}</span></div><script>var dt = [{value: 111,label: aaa}, {value: 222,label: bbb}, {value: 333,label: ccc}, {value: 444,label: ddd}, {value: 555,label: fff}];var vm = new Vue({el: #qwe,data: {options: [{value: 选项1,label: 黄金糕}, {value: 选...
最近在做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="send in sendList" name="sendSymbolId" :value="send.VALUE" >{{send.CODE}}</option> </select> 2、取值就直...
之前写了.一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封装一个组件，供咱们项目中经常调用，减少代码量。 html： <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="true" :value="null"> <span style="float: left;font-weight: bold">周次 </span> <span style="float: left; color: #8492a6; font-...
TIPs： 用了element UI的select选择器 <el-select>。 换成普通select也差不多。 数据没写南海诸岛，没写默认全国。 HTML： <!--联动选择地区--> <el-form-item label="选择地区："> <el-select size="small" style="width: 100px" v-model="selectProv" placeholder="请选择省份" v-on:change="getProv($event)"> <el-option v-for="item in provs" :label="item.label" :value="item.value"> </el-option> </el-select> <el-selec...
当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的select加一个@change事件就可以了 <div class="inputLine"><span>所在区域</span><select name="" v-model="countryName" @change="selectCountry"><option :value="item" v-for="(item,index) in area">{{item.country}}<svg class="icon icon-arrow-bottom" aria-hidden="true"><use xlink:href="#icon-arrow-bottom" rel="external...
本文介绍了vue2.x select2 指令封装，分享给大家，具体如下： 其他的就不说了，说说封装过程的问题吧 1、vue不同版本指令接受参数不一样 2、酱油君对于vue2.x双向绑定的机制不了解（有大神路过望在评论中不吝赐教）上代码：<!DOCTYPE html> <html> <head><title>vue select2 封装</title><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" /><scr...
目前，项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作，前端使用了vue2的mvvm功能，但是由于不是单页面应用，所以，并没有涉及到其它的如vue-route等功能，也未使用webpack等编译功能，所以，也没有使用.vue文件功能。这时候，如果用到控件，则多数从原jquery的组件中选择。 select下拉搜索选择 这次的需求调研与设计是原来做winform开发的同事，由于用惯了devexpress这个控件库，所以，对于searchloo...
话不多说，先看效果。其实就是一个可以按住鼠标进行一个区域内条目选择的功能，相信用过Jquery UI 的都知道这是selectable的功能，然而我们如果用Vue开发的话没有类似的插件，当然你仍然可以把jquery的拿过来直接用，但是我又不想引入jquery 和 jquery UI在我的项目中，于是我就自己尝试着实现类似的功能。要实现这个功能分两步。第一步是实现鼠标选择区域的功能，第步部是把这个区域内被选择的item添加一个active的类。先看如何实...
今天有一个盆友问小颖，怎么实现用select动态控制input禁用，也就是说，input默认是可编辑的，但是每当我选一次select，input就会变成禁用，虽然小颖不知道她为什么这样做，因为小颖觉得为什么不直接把input设置成禁用的而要用动态的，选一次select禁用一次input，也就是说，input只有在select是没有点击过的时候是可编辑的，但凡我改变一次select的值，input就要被设置成禁用，其实没有必要，因为第一次设置成禁用后面已经不能再改...
因为bootstrap-select功能比较强大，而且样式还不错，所以在项目使用了vue，所以，觉得对bootstrap-select进行封装。 html代码如下:<my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :load="load" :multiple="input.multiple" :method="change"></my-select> js// select 插件 Vue.component(vm-select, {props : [options, value, multiple, method, load, inde...
在网上搜索了Vuejs2.0 动态级联select许久未果，决定自己总结一下自己的经验，有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术，我参考了网上成熟的经验，选择以Vue.js 2.0+Vue-router+Vuex的全家桶。 select首先要区分单选和多选，v-model在select单选和多选上有区别。 select单选实例： <select v-model="fruit"><option selected value="apple">苹果</option><option value="banana">香蕉</option><...