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就可以获取       

     




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值