我和vue.js 第3篇——入门

继续上次的省市区三级联动,上次只是循环把省份打印了出来,还需要数据的双向绑定,用户填写完省市区的时候如果返回修改,就要初始化出用户已经选择的值。

使用v-model实现数据与select的双向绑定,如果定义的province的值==下面循环出来的option的vlaue值,就会触发选中。双向的意思就是,用户改变select的值时同时会自动改变province的值。这样就实现了省份和默认值的双向绑定。

下面是城市的数据,开始考虑,城市有很多,不像省似得需要全打印出来,需要打印的是选中省份下的城市,那么怎么获得选中的省份那。这是一个很大的问题,后来查了查教程发现有个计算的函数

通过这个函数计算的数据就可以return 给这个函数名,就可以直接调用。上述代码的思路就是,for循环出整个数字,if判断第i个省份和定义的默认省份相同,i也就是选中的省份索引,return 出i下的城市数组。

直接option循环绑定的时候直接循环刚刚计算的那个函数名,同理使用v-model和默认的城市数据双向绑定,说道这儿那么地区绑定的话也很简单了,同样的道理,下面贴出完整的代码

 

 

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/188
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论