IMWeb训练营作业 - vue实现select

html代码如下：

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

js代码如下：

var vm=new Vue({
    el:"#selectOptions",
    data:{
        preTitle:"select",
        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;
}