vue day3 bootstrap 联动下拉

最新推荐文章于 2024-05-15 00:21:36 发布

weixin_34303897

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量245

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LiuFengH/p/10469845.html

版权

 <!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>

转载于:https://www.cnblogs.com/LiuFengH/p/10469845.html

weixin_34303897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue day3 bootstrap 联动下拉

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> ...
复制链接

扫一扫