<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

    <style type="text/css">

        .conditions * {

            display: inline;

            width: 200px;

            margin-left: 150 px;

            margin-top: 20px;

            margin-bottom: 2px;

        }

        .btn-default {

            width: 120px;

            margin-left: 5px;

            margin-top: 5px;

            margin-bottom: 10px;

        }

        .dropdown-toggle {

            width: 30px;

        }

    </style>

</head>

<body>

        <body>

                <div id="divContent"  class="conditions" style="height:auto" >

                    <select v-model="OneData" class="form-control">

                        <template v-for="item in selOneVal">

                                <option v-bind:value="item.value">{{item.text}}</option>

                        </template>

                    </select>

                    <select v-model="TwoData" class="form-control">

                        <template v-for="item in selTwoVal">

                                <option v-bind:value="item.value">{{item.text}}</option>

                        </template>

                    </select>

                </div>

              </body>

</body>

    <script type="text/javascript">

        $(function () {

            vm.OneChange();

        })

        var vm = new Vue({

            el: '#divContent',

            data: {

                selOneVal: [],

                selTwoVal: [],

                selThreeVal: [],

                OneData: '国家',

                TwoData: '',

            }, methods: {

                OneChange: function () {

                    vm.selOneVal = [];

                    this.selOneVal.push(

                        { value: '国家', text: '国家' },

                        { value: '1', text: '中国' },

                        { value: '2', text: '法国' },

                    )

                    this.selTwoVal.push({ value: '省级', text: '省级' })

                }

            }

               , watch: {

                   OneData: function () {

                       vm.selTwoVal = [];

                       vm.selThreeVal = [];

                       this.selTwoVal.push({ value: '省级', text: '省级' })

                       var s1 = vm.OneData;

                       if (s1 == 1) {

                           this.selTwoVal.push(

                       { value: '1', text: '湖南' },

                       { value: '2', text: '湖北' },

                       { value: '3', text: '上海' })

                       } else if (s1 == 2) {

                           this.selTwoVal.push(

                    { value: '4', text: 'Paris' },

                    { value: '5', text: 'Nanc' },

                    { value: '6', text: 'Rouen' })

                       }

                       vm.TwoData = '省级';

                   },

               }

        })

    </script>

</html>

　　

vue day3 bootstrap 联动下拉的更多相关文章

  1. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  2. vue elementui二级联动下拉选项demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  5. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  6. SharePoint 2013 使用查阅项实现联动下拉框

    SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...

  7. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  8. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  9. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

随机推荐

  1. .NET Core 配置GC工作模式与内存的影响

    .NET Core 配置GC工作模式与内存的影响 .NET Core GC 原文:https://blog.markvincze.com/troubleshooting-high-memory-usa ...

  2. burpsuit 无法导入证书，抓取https的解决办法

    想用burpsuit中转https流量,需要安装证书: 确保浏览器能访问http 后,访问:http://burp/ 点击右上角下载证书. 然后导入,这些网上都有方法. 但如果你试了后: ①提示导入失 ...

  3. Robot Framework问题记录

    robotframework运行时后台报错UnicodeDecodeError UnicodeDecodeError :'utf-8' codec can't decode byte 0xb2 in ...

  4. WPF InkCanvas 书写毛笔效果

    https://www.cnblogs.com/younShieh/p/10602787.html

  5. Http头：Expires，Cache-Control，Last-Modified,ETag

    Expires:过期时间          el:Expirse:Fri,30 Oct 1998 14:19:41 Cache-Control:缓存控制         el:Cache-Contro ...

  6. rsync详细配置

    1 说在前面的话 rsync官方网站: https://www.samba.org/ftp/rsync/rsync.html rsync是可以实现增量备份的工具.配合任务计划,rsync能实现定时或间 ...

  7. Petrozavodsk Winter Camp, Andrew, 2014, Bipartite Bicolored Graphs

    由i个点和j个点组成的二分图个数为 $3^{ij}$,减去不联通的部分得到得到由i,j个点组成的联通二分图个数 $g_{i,j} = 3_{ij} - \sum_{k=1}^i \sum_{l=0}^ ...

  8. SAP发布REST/HTTP接口

    1.SE24新建类:ZCL_REST_QUERY 激活,然后添加interface:IF_HTTP_EXTENSION并激活. 2.实现IF_HTTP_EXTENSION~HANDLE_REQUEST ...

  9. Python基础综合练习

    from turtle import * def draw(x): begin_fill() for i in range(5): forward(x) right(144) end_fill() d ...

  10. windows 安装nvm步骤（shi'yongnvm-windows管理node版本）：

    瞎几把前言:mac上可以用n来管理node版本,私以为n很好用.家里的win7台式机一直没有安装过任何管理工具,今天来给家里电脑安装一下nvw-windows,一个用于windows系统的node版本 ...