Vue.js组件之联动下拉框

Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
    <link href="../public/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="../public/javascripts/jquery.js" type="text/javascript"></script>
    <script src="../public/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="../public/javascripts/vue.js" type="text/javascript"></script>
</head>

<div class="row"  id="selectOptions">
    <div class="col-md-3">
       <h4> {{preTitle}}</h4>
    </div>

<div class="col-md-3">
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         {{title}}
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li v-for="item in countrys"><a href="#" v-on:click="warn">{{item.country}}</a></li>
    </ul>
</div>
</div>

<div class="col-md-3">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{title2}}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li v-for="item in items2"><a href="#" v-on:click="warn2">{{item.province}}</a></li>
        </ul>
    </div>
</div>

<div class="col-md-3">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{title3}}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li v-for="item in items3"><a href="#" v-on:click="warn3">{{item.city}}</a></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

　　Js部分：

<script>
    var vm=new Vue({
        el:"#selectOptions",
        data:{
            preTitle:"联动下拉框",
            title:"国家",
            title2:"省份",
            title3:"市区",
            countrys:[
                {country:"中国"},
                {country:"美国"},
                {country:"日本"}
            ],
            items2:[],
            items3:[]
        },

        methods:{
            warn:toSelect2,
            warn2:toSelect3,
            warn3:recordSelect3,
        }
    });

   function toSelect2(event){
       vm.items2=[];
       var content=event.target.text;
       vm.title=content;
       var provinces=[{province:"江苏省"},{province:"浙江省"},{province:"上海市"}];
       for(var item in provinces){
           vm.items2.push(provinces[item]);
       }
   }

    function toSelect3(event){
        vm.items3=[];

        var content=event.target.text;
        vm.title2=content;
        var citys=[{city:"南京市"},{city:"无锡市"},{city:"苏州市"}];
        for(var item in citys){
            vm.items3.push( citys[item]);
        }
    }

    function recordSelect3(event){
        var content=event.target.text;
        vm.title3=content;
    }
</script>

　　请按顺序依次加载所需库文件。