精华内容
下载资源
问答
  • 使用Vue实现下拉列表框批量添加选项,设置被选中的值。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN...

    使用Vue实现下拉列表框批量添加选项,设置被选中的值。

    代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>学习Vue</title>
    		<!-- 使用CDN引入Vue.js -->
    		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<!-- 下拉列表框 -->
    			<select v-model="selected" name="group">
    				<!-- 循环为下拉列表框赋值 -->
    				<option v-for="option in optionsList" v-bind:value="option.value">{{option.key}}</option>
    			</select>
    		</div>
    
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					// 下拉列表框选项列表
    					optionsList: [{
    						key: "请选择...",
    						value: "select"
    					}, {
    						key: "唐僧",
    						value: "tangseng"
    					}, {
    						key: "孙悟空",
    						value: "sunwukong"
    					}, {
    						key: "猪八戒",
    						value: "zhubajie"
    					}, {
    						key: "沙僧",
    						value: "shaseng"
    					}, {
    						key: "小白龙",
    						value: "xiaobailong"
    					}],
    					// 设定初始选中"小白龙"
    					selected: "xiaobailong"
    				}
    			});
    		</script>
    	</body>
    </html>
    

    浏览器查看:

    展开全文
  • vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41,浏览次数:3776, 标签:vue<>前端,有时有这样的需求,需要一个下拉列表,还要有多选全选功能,以及模糊查询功能的vue组件,我做了...

    vue实现下拉列表多选全选以及模糊查询的vue组件

    发布时间:2018-09-12 17:41,

    浏览次数:3776

    , 标签:

    vue

    <>前端,有时有这样的需求,需要一个下拉列表,还要有多选全选功能,以及模糊查询功能的vue组件,我做了一个简陋的组件,供大家参考,有问题请留言

    这是我的文件目录结构

    **

    效果图:

    o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o

    模糊查询:

    下面贴出代码

    这是组件代码mohuSearch.vue

    { name: "mohu-search", props:{//接收父组件传递过来的数据 data1: { type: Array, default: []

    }, }, data(){ return{ listShow:false, search:'', checkedNames:[],

    items:['jack','mike','rose','jan']//下拉列表的选项数据,此数据可以从父组件传过来,通过props接收,接收到props数据后赋值给该数据即可

    } }, created(){ console.log(this.data1) }, watch: { // 监视双向绑定的数据数组

    checkedNames: { handler(){ // 数据数组有变化将触发此函数 var checkObj1 =

    document.querySelectorAll('.checkItem'); // 获取所有checkbox项

    if(this.checkedNames.length == checkObj1.length){

    document.querySelector('#quan').checked = true; }else {

    document.querySelector('#quan').checked = false; } }, deep: true // 深度监视 },

    search:{ handler(){//搜索框输入变化触发 this.listShow=true; }, deep: true // 深度监视 } },

    methods: { checkAll(e){ // 点击全选事件函数 var checkObj =

    document.querySelectorAll('.checkItem'); // 获取所有checkbox项 if(e.target.checked){

    // 判定全选checkbox的勾选状态 for(var i=0;i

    if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中

    this.checkedNames.push(checkObj[i].value); } } }else { //

    如果是去掉全选则清空checkbox选项绑定数组 this.checkedNames = []; } }, show(){

    this.listShow=!this.listShow; if(this.listShow==true){ this.checkedNames = [];

    } } }, computed: { searchData: function() { var search1 = this.search; if

    (search1) { return this.items.filter(function(product) { return

    Object.keys(product).some(function(key) { return

    String(product[key]).toLowerCase().indexOf(search1) > -1 }) }) } return

    this.items; } } }

    这是简陋的样式文件 mohuSearch.css

    .searchBox{ width: 200px; height: 26px; position: relative; } .select{ width:

    98%; height: 100%; } .down{ position: absolute; width: 0; border:9px solid

    transparent; border-top: 11px solid black; top: 10px; right: 7px; cursor:

    pointer; } .list{ width: 100%; } .list>li{ height: 20px; background: white;

    border: 1px solid lightgray; border-top: none; }

    想引用此组件,你可以这样,v-bind向子组件传值,子组件通过props接收传过去的值,代码中有注释,应该可以看懂

    • {{item.name}},价格:¥{{item.price}}

    :data1="options">

    from './mohuSearch/mohuSearch' export default { name: "mohu", components:{

    mohusearch }, data() { return{ options:['苹果','香蕉','菠萝','西瓜'], } }, }

    <>好了,基本就是这样了,如有疑问,请在下方留言,欢迎大神提出改进意见。

    **

    展开全文
  • &lt;el-select v-model="form.fzr" placeholder="负责任"&gt; &lt;el-option v-for="(item,index) in fzr1" :key="index" :label="... &
     <el-select v-model="form.fzr" placeholder="负责任">
               <el-option v-for="(item,index) in fzr1" :key="index" :label="item.label" :value="item.value">
               </el-option>
      </el-select>
    

    在data下定义fzr1

    data(){
        return {
           fzr1:[{
                value:'0',
                label:'负责人1'
            },{
                value:'1',
                label:'负责人2',
            },{
                value:'2',
                label:'负责人13'
            }],
        }
    
    }
    

     

    展开全文
  • 本文实例讲述了vue实现百度下拉列表交互操作。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue百度下拉列表...
  • 给大家分享一篇关于vue实现百度下拉列表交互操作示例的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧。 www.jb51.net vue百度下拉列表 .gray{ background: #ccc; } window.function(){ new ...

    给大家分享一篇关于vue实现百度下拉列表交互操作示例的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧。

    www.jb51.net vue百度下拉列表

    .gray{

    background: #ccc;

    }

    window.function(){

    new Vue({

    el:‘body’,

    data:{

    myData:[],

    t1:’’,

    now:-1//按上下键,当前选中

    },

    methods:{

    get:function(ev){

    if(ev.keyCode38 || ev.keyCode40)return;

    if(ev.keyCode==13){

    window.open('https://www.baidu.com/s?wd=’+this.t1);

    this.t1=’’;

    }

    this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su’,{

    wd:this.t1

    },{

    jsonp:‘cb’

    }).then(function(res){

    this.myData=res.data.s;

    },function(){

    });

    },

    changeDown:function(){

    this.now++;

    if(this.now==this.myData.length)this.now=-1//走到最下面那个,就返回最上面那个;

    this.t1=this.myData[this.now];//搜索框的值对应变化

    },

    changeUp:function(){

    this.now–;

    if(this.now==-2)this.now=this.myData.length-1;

    this.t1=this.myData[this.now];

    }

    }

    });

    };

    {}

    原文链接http://kuaibao.qq.com/s/20190312A0UQ0J00

    展开全文
  • 效果展示image.png下拉组件∨//下拉列表{{item.Name}}data() {return {checkedData: [], //选中的数据isShow: false, //下拉列表是否显示selectCon: "", //选中的内容};},props: ["liData"],点击空白处隐藏下拉列表...
  • vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .gray{ ...
  • 主要介绍了Vue.js实现下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表) ,需要的朋友可以参考下
  • 主要介绍了vue实现歌手列表字母排序,下拉滚动条侧栏排序实时更新,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 实现下拉无限刷新

    2019-03-22 09:51:45
    vue搭建的微信公众号开发,首页的列表需要无限下拉加载刷新,直接上项目里的代码: data(){ noMore:false, //没有更多了 lock:false }, created(){ this.getList(); var $this = this; window....
  • 主要介绍了在vue中根据光标的显示与消失实现下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 下拉列表 &lt;el-form-item label="部门"&gt; &lt;el-select v-model="department" placeholder="请选择" style="width:695px;"&gt; &lt;el...
  • 然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件...
  • Vue.js——实现下拉列表多选

    千次阅读 2019-03-07 16:55:19
    <script src="vue-resource-1.3.4.js"> <script src="vue-2.4.0.js"> 请选择你喜欢的运动: 游泳">游泳 跑步">跑步 篮球">篮球 你喜欢的运动是:{{selected}} </div> ...
  • vue中calss 动态绑定实现下拉列表

    千次阅读 2017-12-04 10:47:09
    交代下背景:现在在做一个vue项目,需要实现班级的逻辑是:如下图所示:点击某个班级,右侧箭头自动
  • vue下拉列表的两种实现方式

    万次阅读 2018-08-23 01:53:03
    第一种采用v-for的方式 select v-model= "form.columeType" placeholder= "字段类型" ...两种方式都差不多,只是第一种方式需要在data中进行配置,对于...对于简单的下拉列表参数很少的情况,第二种明显更占优。
  • 找了好多博客实现效果都……emmm……应用Vue自带的过渡 《进入/离开 & 列表过渡》和 嵌套路由 和 fixed定位实现其实还是挺简单的。在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将router-view用...
  • 移动端开发,处理列表翻页和数据的时候,下拉刷新和上拉加载应用的比较广泛,今天给大家推荐一个vue的插件,vueScroll,首先上图:话不多说,上代码了:一、引入并使用VueScrollimport VueScroller from 'vue-...
  • 主要介绍了jQuery+vue.js实现的多选下拉列表功能,涉及jQuery+vue.js数据绑定及事件响应相关操作技巧,需要的朋友可以参考下
  • 今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序我们先来看看效果那就用vue实现一遍首先新建一个vue页面,取名为helloworld.vue在页面里...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 203
精华内容 81
关键字:

vue实现下拉列表

vue 订阅