精华内容
下载资源
问答
  • Vue实现二级联动

    千次阅读 2020-07-16 14:13:23
    Vue实现二级联动: [思路] 1.先定义两个变量集合:一个用于装一级列表,另一个用于装二级列表 写两个select 第一个select绑定触发事件,但触发事件是触发查询二级列表的:在触发时,同时将一级列表的码值传到二级,...

    Vue实现二级联动:
    [思路]
    1.先定义两个变量集合:一个用于装一级列表,另一个用于装二级列表
    写两个select
    第一个select绑定触发事件,但触发事件是触发查询二级列表的:在触发时,同时将一级列表的码值传到二级,用于查询父级条件
    在这里插入图片描述

    【注】一级函数要在加载时触发,否则没有用
    【注】二级select不用写触发条件,否则报错
    【函数】
    在这里插入图片描述

    展开全文
  • vue实现二级联动.html

    2021-03-25 15:21:34
    vue实现二级联动.html
  • vue 实现二级联动

    千次阅读 2018-09-10 17:54:03
    因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下:第一种:这是第一种方法的html部分代码: <div id="test">...

    因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下:
    第一种:
    这是第一种方法的html部分代码:

    <div id="test">
      <select v-model="selected">
        <option v-for="yx in YX" :value="yx.text">
            {{yx.text}}
        </option>
      </select>
      <select>
        <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false">
            {{zy.text}}
        </option>
      </select>
    </div>

    这是第一种方法的js部分代码:

    new Vue({
      el: '#test',
      data: {
        selected: '计信院',
        YX: [{
          text: '计信院',
          ZY: [{
            text: '软件工程'
          }, {
            text: '计算机科学与技术'
          }, {
            text: "信息安全"
          }, ]
        }, {
          text: '商学院',
          ZY: [{
            text: '旅游管理'
          }, {
            text: '工商管理'
          }, {
            text: "行政管理"
          }, ]
        }, ]
      },
      computed: {
        selection: {
          get: function() {
            var that = this;
            return this.YX.filter(function(item) {
              return item.text == that.selected;
            })[0].ZY;
          }
        }
      }
    });

    以上是一种方法,总体来说还不错,而且默认有第一项,无需在写默认项。
    下面是另一种方法,这个方法和上面不同的是没有默认项,但是比上面哪种方法更好理解,这个方法怎么加默认项,现在还没搞明白,后续会继续更新:
    这是第二种方法的html部分代码:

    <div id="test">
        <select v-model="A">
            <option v-for="yx in YX">
                {{yx.text}}
            </option>
        </select>
    
        <select>
            <option v-for="zy in selection">
                {{zy.text}}
            </option>
        </select>
    </div>

    这是第二种方法的js部分代码:

    var vm = new Vue({
        el:'#test',
        data:{
            YX:[
                {
                    text:'计信院',
                    ZY:[
                        {text:'软件工程'},
                        {text:'计算机科学与技术'},
                        {text:"信息安全"},
                    ]
                },
                { 
                    text:'商学院',
                    ZY:[
                        {text:'旅游管理'},
                        {text:'工商管理'},
                        {text:"行政管理"},
                    ]
                },       
            ]
        },
        computed:{
            selection: function() {
                for (var i = 0; i < this.YX.length; i++) {
                    if (this.YX[i].text === this.A) {
                        return this.YX[i].ZY;
                    }
                }
            }
        }
    });

    总体来说,两种方法都可以,都值得借鉴一下

    展开全文
  • vue实现二级联动选择器

    千次阅读 2018-03-29 17:14:41
    使用vue实现二级联动的下拉列表选择器,代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo&lt...

    使用vue实现二级联动的下拉列表选择器,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
      <div id="test">
        <span>选择知识路径:</span>
        <select v-model="selectedDepartment">
             {{department.name}} 
         </option>  //一级选择器
        </select>
    
        <select>
          <option v-for="major in majors"> 
              {{major}}   //二级选择器
          </option>
        </select>
      </div>
    
    <script type="text/javascript">
        new Vue({
            el: '#test',
            data: function() {
            return {
              departments: [
                {name: '高中', majors: ['数学', '英语', '语文','化学']},
                {name: '初中', majors: ['数学', '英语', '语文']},
                {name: '小学', majors: ['数学', '语文']}
              ],
              selectedDepartment: '高中'
            };
            },
            computed: {
            majors: function() {
              var majors = [], selectedDepart = this.$data.selectedDepartment;
              this.$data.departments.forEach(function(d) {
                if(d.name == selectedDepart)
                  majors = d.majors;
              });
              return majors;
            }
            }
        })
    </script>
    </body>
    </html>
    
    展开全文
  • vue实现二级联动效果

    千次阅读 2019-04-27 18:23:00
    你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> .pag-set-bg{...

    你如城市与省份间的二级联动效果

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>demo</title>
    	<style type="text/css">
    		.pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}
    	</style>
    </head>
    <body>
    <div id="app">
    	<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"></use>
                  </svg>
                </option>
              </select>
              <select name="" v-model="cityName">
                <option :value="item" v-for="(item,index) in countryName.city">
                  {{item}}
                  <svg class="icon icon-arrow-bottom" aria-hidden="true">
                    <use xlink:href="#icon-arrow-bottom"></use>
                  </svg>
                </option>
              </select>
            </div>
    </div>
    <script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/vue-resource.min.js"></script>
    <script>
    	new Vue({
    		el:'#app',
    		data:{
    			list:[
    				{
    		          text: '这是第1条数据'
    		        }
    			],
    			UniversityList:[],
            	schoolList:[],
            	countryName:{},
    	        cityName:"请选择城市",
    	        area:[
    	          {
    	            "country":"美国",
    	            "city":[
    	              "纽约",
    	              "洛杉矶",
    	              "旧金山",
    	              "西雅图",
    	              "波士顿",
    	              "休斯顿",
    	              "圣地亚哥",
    	              "芝加哥",
    	              "其它",
    	            ]
    	          },
    	          {
    	            "country":"加拿大",
    	            "city":[
    	              "温哥华",
    	              "多伦多",
    	              "蒙特利尔",
    	              "其它"
    	            ]
    	          },
    	          {
    	            "country":"澳大利亚",
    	            "city":[
    	              "悉尼",
    	              "墨尔本",
    	              "其它"
    	            ]
    	          },
    	          {
    	            "country":"新加坡",
    	            "city":[
    	              "新加坡"
    	            ]
    	          },
    	         
    	        ],
    		},
    		
    		methods:{
    		      selectCountry(value){
    		        this.cityName=this.countryName.city[0];
    		      },
    			}
    		})
    </script>
    </body>
    </html>
    

      http://www.cnblogs.com/beileixinqing/p/8252153.html

    转载于:https://www.cnblogs.com/lvxisha/p/10779664.html

    展开全文
  • 以下是我的实现: 代码实现 反思: 题没看清,数量那个地儿应该是输入框,我给弄成了下拉框 不熟练,一直得百度,一直得改bug,也才到这样一个效果 贴个代码记录一下: <!-- 第一个下拉框 --> <select ...
  • 下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue.js文件: <template> <div class="linkage"> <el-select v-model="sheng" @change="choseProvince" placeholder="省级地区"> <el-option v-for="item in province" :k...
  • vue实现级联动

    2020-06-03 20:51:54
    主要用到数据双向绑定v-mode 以及forEach数组遍历 一.data中数据格式 .html部分 三.js部分
  • springdatajpa+vue实现省市区三级联动 一,编写后端代码 1、创建springboot项目,添加 web、jpa、lombok、mysql、jdbc 启动器,并创建对应的层 2、编写省,市,区的实体(idea使用了lombok插件),SQL等项目文件文末...
  • vue下拉框二级联动

    2021-03-22 00:36:49
    <... <head> <meta charset="utf-8">...script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> .
  • vue省市二级联动

    2021-04-14 21:37:45
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...二级
  • vue select 二级联动

    2020-12-10 00:21:45
    <template> <div> <el-select v-model="province" placeholder="请选择" @change="selectChange"> <el-option v-for="(item, index) in compony" :key="index" :label="item.name" :value=...
  • vue实现级联动select

    万次阅读 2018-03-20 16:01:50
    最近客户有一个需求:讲“常用短信”按照按照分组进行管理,选择一分组的名称,显示这个父级分组的底下的所有常用短信内容,再选择子分组,精确显示这个子分组底下的常用短信。 先贴代码吧: &lt;...
  • js (vue)实现二级联动

    2020-05-19 15:46:25
    i++){ city.options[i].text = arr_city[index][i] } } </script> </body> </html> 备注 onchange不要写成onChange 二、二级联动vue中的使用(固定数据) 三、二级联动vue中获取后台数据的用法 html <span>案例...
  • vue实现下拉表单二级联动

    万次阅读 2018-08-08 09:57:08
    --一菜单--&gt; &lt;select name="province" id="province" class="classify" v-on:change="indexSelect01" v-model="indexId"&gt; &lt;...
  • Vue实现级联动样式一

    千次阅读 2019-09-18 10:34:07
    是省市二级联动数据(不带“全部”选项) regionData 是省市区三级联动数据(不带“全部”选项) provinceAndCityDataPlus 是省市区三级联动数据(带“全部”选项) regionDataPlus 是省市区三级联动数据...
  • 实现省市二级联动时,如果省份和城市写在一个数组对象中。可以根据,点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断iView中的on-change事件on-change事件:即选中的Option变化时触发,...
  • vue二级联动

    2018-12-17 17:22:00
    思路就是v-model绑定第一个下拉选择框,然后在watch去监听事件的改变 在watch方法执行请求数据的方法,然后把结果赋值给一个数组,在吧数组循环展示在第个下拉选择框的选项中。事件每次改变去请求新的数据时要把...
  • 城市数据见 城市数据样式是基于bootstrap 直接上代码html部分地区:请选择{{p.area_name}}请选择{{c.area_name}}var app = new Vue({el:"#vue_container",data:{current_page:$_GET.page?parseInt($_GET.page):1, /* ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,657
精华内容 662
关键字:

vue实现二级联动

vue 订阅