精华内容
下载资源
问答
  • vue下拉列表

    2019-07-24 17:43:00
    vue处理下拉列表 vue绑定下拉列表 <select id="selected" v-model="selected"> <option value="" >{{selecttext}}</option> </select> selected:...

    vue处理下拉列表  vue绑定下拉列表

            <select id="selected" v-model="selected">
               <option value="" >{{selecttext}}</option>
            </select>
              selected:'',
            selecttext:'选择优惠券',
                        //处理优惠券
                              let list=[];
                              list=data.list;
                              for(let i=0;i<list.length;i++){
                                  $("#selected").append("<option  value='"+list[i].id+"'>"+list[i].name+"</option>");
                                  }   

     

    转载于:https://www.cnblogs.com/qq376324789/p/11239674.html

    展开全文
  • 主要介绍了vue下拉列表功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 下拉列表 组件模板</title> </head> <body> <div id...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Vue 下拉列表 组件模板</title>
        </head>
        <body>
            <div id="app">
                用户角色:<dsh-select-list :items='roles'></dsh-select-list>
    
                商品分类:<dsh-select-list :items='types'></dsh-select-list>
            </div>
    
            <!-- 定义组件模板 -->
            <template id="template">
                <select>
                    <option value="-1">请选择</option>
                    <option v-for="item in items" v-bind:value="item.id">{{item.name}}</option>
                </select>
            </template>
            <script src="vue.js"></script>
            <script>
                //1.创建组件
                Vue.component("dsh-select-list", {
                    props: ['items'],
                    template: '#template'
                });
    
    
                //2.初始化
                var app = new Vue({
                    el: "#app",
                    data: {
                        //数组:用户角色
                        roles: [{
                                id: 1,
                                name: "管理员"
                            },
                            {
                                id: 2,
                                name: "普通用户"
                            }
                        ],
                        //数组:商品分类
                        types: [{
                                id: 1,
                                name: "零食"
                            },
                            {
                                id: 2,
                                name: "数码"
                            },
                            {
                                id: 3,
                                name: "生活用品"
                            },
    
                        ]
                    }
                })
            </script>
    
        </body>
    </html>
    

     

    转载于:https://www.cnblogs.com/wangshuang123/p/10790222.html

    展开全文
  • 下拉列表 基本样式 vue html部分 <view class="myCollapse"> <view class="defaultOption" @click="showOptions"> <text >{{year}}</text> <view class="angle"></...

    下拉列表 基本样式 vue

    样式很简陋,css自己重新写比较好:D
    点击选择年份 默认年份2020
    在这里插入图片描述
    在这里插入图片描述

    html部分

    <view class="myCollapse">
    				<view class="defaultOption" @click="showOptions">
    					<text >{{year}}</text>
    					<view class="angle"></view>
    				</view>
    				<view>
    					<view class="options" :class="{active:flag}">
    						<view class="option" v-for="(item,index) in years" :key="index" @click="selectYear(item.year)">{{item.year}}</view>
    				    </view>
    			    </view>
    </view>
    

    js部分

    <script>
    	export default {
    		data() {
    			return {
    			       year:2020,
    			       years: [202020192018],
    			       }
    		 },
    		 methods:{
    		     // 展开年份列表
    			 showOptions() {
    				this.flag = !this.flag
    			},
    			// 选择年份
    			selectYear(item) {
    				this.year = item
    				this.flag = !this.flag
    			}
    		 }
    	}
    	</script>
    

    css部分

    <style lang="scss">
        .myCollapse {
    					position: relative;
    					color: #999;
    					font-size: 26rpx;
    					width: 25%;
    					height: 60rpx;
    					border-radius: 15rpx;
    					border: 1px solid #999;
    					background-color: #fff;
    
    					.defaultOption {
    						position: relative;
    						height: 50rpx;
    						padding: 0 20rpx;
    						line-height: 50rpx;
    
    						.angle {
    							position: absolute;
    							width: 0;
    							height: 0;
    							border-bottom: 15rpx solid transparent;
    							border-left: 7rpx solid transparent;
    							border-right: 7rpx solid transparent;
    							border-top: 15rpx solid #999;
    							top: 20rpx;
    							right: 15rpx;
    						}
    					}
                        .active {
    			                display: block !important;
    		                    }
    					.options {
    						position: absolute;
    						top: 57rpx;
    						left: 0;
    						z-index: 10;
    						display: none;
    						width: 100%;
    						background-color: #fff;
    						border: 1px solid #1a8eff;
    						line-height: 40rpx;
    
    						.option {
    							padding: 0 20rpx;
    						}
    
    						.option:hover {
    							padding: 0 20rpx;
    							background-color: #1a8eff;
    							color: #fff;
    						}
    					}
                 }
    </style>
    
    展开全文
  • vue下拉列表去重

    千次阅读 2018-08-21 16:30:29
    下面是下拉列表 &lt;el-select v-model="modelId" placeholder="模板id"&gt; &lt;el-option v-for="item in options[0]" :key="item.modelId" :label="...

    下面是下拉列表

     <el-select v-model="modelId" placeholder="模板id">
                <el-option v-for="item in options[0]" :key="item.modelId" :label="item.modelId" :value="item.modelId">
                </el-option>
            </el-select>
             <el-select v-model="seqNum" placeholder="顺序号">
                <el-option v-for="item in options[1]" :key="item.seqNum" :label="item.seqNum" :value="item.seqNum">
                </el-option>
            </el-select>

    定义options

    data(){
        return {
            options:[]
    }}

    过滤

          filterArr(){
            var _this=this;
            var hash = {};
            var modelIdArr=_this.tableData;
            modelIdArr = modelIdArr.reduce(function (item, next) {
                hash[next.modelId] ? '' : hash[next.modelId] = true && item.push(next);
                return item;
            }, []);
            _this.options.push(modelIdArr);
            var seqNumArr=_this.tableData;
            seqNumArr = seqNumArr.reduce(function (item, next) {
                hash[next.seqNum] ? '' : hash[next.seqNum] = true && item.push(next);
                return item;
            }, []);
             //_this.options=modelIdArr;
             _this.options.push(seqNumArr);
             console.log(_this.options);
            },

    上面也可以使用两个不同的option,这样就不用push
    tableData是后台返回回来的数据,
    是一个对象数组

    展开全文
  • vue 下拉列表动画

    千次阅读 2019-10-04 22:30:52
    点击可以收起,这里注意先给需要收起展开的的容器设置高度,通过样式v-enter和v-leave-to设置结束和开始前的就可以了 转载于:https://www.cnblogs.com/xiaozhang666/p/11398156.html...
  • 1.下拉列表传入的是一个string类型的List 2.下拉列表传入的是一个对象的list
  • 它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件...
  • Vue下拉列表el-select二级联动效果

    千次阅读 2018-12-19 11:42:39
    功能介绍:要实现第一级下拉列表数据改变时,二级下拉列表的值随着改变。 &lt;el-form-item prop="p_Roleprop" label="角色权限:"&gt; &lt;div&gt; &lt;el-select v-...
  • 这个组件只是仿element ui select组件,实现了下拉,可以根据自己的需求改造。干货,给个赞吧! <template> <divclass="vic-select"v-close> <div:class="'select-value'+(isOpen?'isfocus':'')...
  • input式的下拉列表的东西 由于极其不爽这个input的下拉列表的样式所以自己写了一个 这个三角的东西是用的图片所以 自己弄一个上去吧 <template> <div class="drop-down-list" :style = "getStyle" ...
  • vue下拉列表的两种实现方式

    万次阅读 2018-08-23 01:53:03
    第一种采用v-for的方式 select v-model= "form.columeType" placeholder= "字段类型" ...两种方式都差不多,只是第一种方式需要在data中进行配置,对于...对于简单的下拉列表参数很少的情况,第二种明显更占优。
  • 最近遇到个很奇怪的问题:这里主要是做2个框的级联关系问题,但是每次选了上面的框,可以选下面的,也能拿到绑定的值,但是不显示; 附上代码: !...经过查资料,终于修复了: 最主要是这里初始化值得问题,不要携程 =...
  • 主要介绍了Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表) ,需要的朋友可以参考下
  • vue下拉菜单选择输入框@ tillhub / vue-search-filter (@tillhub/vue-search-filter)Vue search input with dropdown for more filters.Vue搜索输入带有下拉列表,用于更多过滤器。View Demo 查看演示 Download ...
  • vue7 下拉列表

    2017-06-10 01:15:00
    ="vue-resource.js" > script > < script > window.onload = function (){ new Vue({ el: ' body ' , data:{ myData:[], t1: '' }, methods:{ get: function (){ this .$http.jsonp( ' ...
  • vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好
  • 本文实例讲述了vue实现百度下拉列表交互操作。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue百度下拉列表...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 558
精华内容 223
关键字:

vue下拉列表

vue 订阅