Vue.js 实现省市联动

  

           HTML页面

              

    <div id="pro_citys">

        省:<select id="provice" v-on:change="prochange()">
            <option v-for="pitem in parray" v-bind:value="pitem.Id">{{ pitem.Name }}
            </option>
        </select>

        市：
           <select id="city">
               <option v-for="pitem in citys" v-bind:value="pitem.Id">{{ pitem.Name }}
               </option>
           </select>

    </div>

            JS代码    

(function () {

            $.get("ProviceHandler.ashx", function (result) {

                //需要把json字符串转换成json数组对象
                var jsonarray = JSON.parse(result);

                //vue实例
                var pvue = new Vue({
                    el: "#pro_citys",
                    data: {
                        parray: jsonarray, //省存放的数据
                        citys: []  //城市存放的数据
                    },
                    methods: {
                        prochange: function () {

                            //查询数据，然后给该省下面的城市赋值
                            this.$data.citys = getCityByPid($("#provice").val());
                        }
                    }
                });

            });

        });


        //通过省id查询城市id
        var getCityByPid = function (_pid) {

            var jsonarray;

            $.ajax({
                async: false,
                url: "CityHandler.ashx",
                type: "get",
                data: { proviceId: _pid },
                success: function (result) {
                    //需要把json字符串转换成json数组对象
                    jsonarray = JSON.parse(result);
                }
            });

            return jsonarray;
        }

         一个vue实例里边，可以赋值多个数据，为省市都提供数据

         如果一个vue实例里边有多个数据，要注意Vue作用的范围，绑定的id对应的元素要包含需要使用数据

         的范围里才能作用到

        

        VueJS的事件绑定       

       

        这里使用了v-on:change来为下拉列表框绑定了改变事件，对应的方法就是vue实例里边的prochange

        方法 

v-on:change="prochange()"

                 

 methods: {
                        prochange: function () {

                            //查询数据，然后给该省下面的诚实赋值
                            this.$data.citys = getCityByPid($("#provice").val());
                        }
                    }

        这样做的好处就是如果使用vue里边的方法可以放方便的使用vue实例里边对应的数据

        通过this.$data就可以获取