<!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. CBV与FBV

    FBV FBV(function base views)就是在 url 中一个路径对应一个函数 urls.py urlpatterns = [ url(r'^admin/', admin.site.u ...

  2. ORM模型

    一.创建及映射(orm_intro_demo文件) 在项目新建App下的models.py文件下新建ORM模型: from django.db import models #如果要将一个普通的类变成一 ...

  3. idea新建一个spring项目，图解

    废话不说直接按图操作 选择Web模块的Web功能,单击Finish,idea会在spring.io网址上下载功能模板,下载玩成之后就是一个完整的Spring Boot工程 Project locati ...

  4. Kafka学习之二 Kafka安装和使用

    部署环境Linux(Centos 6.5),JDK 1.8.0,zookeeper-3.4.12,kafka_2.11-2.0.0. 1. 单机环境     官方建议使用JDK 1.8版本,因此本文使 ...

  5. guxh的python笔记六：类的属性

    1,私有属性 class Foo: def __init__(self, x): self.x = x 类的属性在实例化之后是可以更改的: f = Foo(1) print(f.x) # 1 f.x ...

  6. 【异常】idea执行Main方法出现 Exception in thread "main" java.lang.NoClassDefFoundError: javax/servlet/http/HttpServletRequest

    一.异常复现步骤 1)首先得是一个Spring MVC项目 注:Spring Boot项目有内置的web 容器,不会出现该问题 2)main方法存在于使用HttpServletRequest类的类中 ...

  7. 来自师兄的Django2.0笔记摘录

    翻看一本书,觉得对于Django的日志处理.权限处理包括Django-guardian还没学清楚,然后书上关于mysql深入学习.elasticsearch.redis.celery分布式都没学过. ...

  8. Django框架（七）

    15 Django组件-中间件 中间件 中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的 ...

  9. less和sass的定义和区别

    less是单独的一种文件,可以理解为css的升级版: sass是一个相对新的编程语言,为web前端开发而生,可以用它来定义一套新的语法规则和函数: 区别: ①   表现方式不同:less基于javas ...

  10. intelij idea设置成eclipse快捷键

    1.导入jar包文件: https://pan.baidu.com/s/1QSd_CY5X_dUUw74evbckXg  密码: 23rq 2.idea -->settting ---> ...