内容简介：省市区联动，又是一个常见的组件。一般来说，通过 select 元素的 onchange 事件来实现，难度不大。而如今换作 vue 框架下，该如何实现呢？这正事我们接下来要探讨的，——但先请容我说，甚至比旧方法更简单！——这就是来自数据驱动——MVVM 的威力！什么是数据驱动呢？往大的说，可以很大（fei hua），且不同场景或上下文之下有微妙差别的解释——而就本文一说，其概念所映射的实物便是 JSON。一旦观察到数据有任何异样（或说变动），所关联的 UI 也会实时地跟着改！却无须程序员给出半句 DOM 代码
省市区联动，又是一个常见的组件。一般来说，通过 select 元素的 onchange 事件来实现，难度不大。而如今换作 vue 框架下，该如何实现呢？这正事我们接下来要探讨的，——但先请容我说，甚至比旧方法更简单！——这就是来自数据驱动——MVVM 的威力！
什么是数据驱动呢？往大的说，可以很大（fei hua），且不同场景或上下文之下有微妙差别的解释——而就本文一说，其概念所映射的实物便是 JSON。一旦观察到数据有任何异样（或说变动），所关联的 UI 也会实时地跟着改！却无须 程序员 给出半句 DOM 代码。于是我们这里，连过去所依靠 onchange 事件都不用写了。
我看过一些联动组件，虽然使用了 vue.js 写就组件但是依旧绑定 DOM 的 change 事件，其实那大可不必，——使用数据驱动的话既优雅又简单。笔者的这个组件，总行数不超过 70 行。
数据来源
既然是省市区数据，必然有一数据提供之。我们选择 github 上提供中国行政区域数据：
https://github.com/dwqs/area-data
其 k/v 规律很容易找，就是一开始是 86 中国，然后找到省的 key，把 key 放到 China_AREA Hash 运算得到是所有的“市”，最后如此反复找到“区”。读者可自行理解一下该结构。
实现联动
首先第一个 select，显示的是所有的“省”，这个好办，就是将
addressData[86] 集合显示出来。vue 的 v-for 模板指令除了可以遍历数组之外，还能遍历对象也就是 json。怎么产生联动呢？当用户选择了下拉框内的一项，选择了一个“省”，那么同时就会在 vue 帮助下修改了 data 数据的 province 项，这是在 v-model 这里声明的，
又因，“市”的下拉框，其数据源是绑定 citys 的，这个 citys 并非一个 JSON 数据而是一个 JS 方法，我们称为“计算方法（computed）”，目的是经过一系列的逻辑后返回的结果才是数据源。为什么那样？因为逻辑如果一行不能写完，而要在标签上写完多行，不是不可以，但维护和编写（转义够麻烦的）足够痛苦的，故干脆弄一个 JS 方法，你自己去写好了。vue computed 项表示这里的方法是计算方法，可以在模板中引用执行，同样 v-for 也可以。
于是，市的数据改了，区的数据也跟着改，所谓“联动”即可体现出来了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- JAreaSelect 2.0.1，JavaScript 省市区三级联动选择插件
- 上拉加载 下拉刷新
- 多级下拉菜单效果
- angular 实现下拉列表组件
- 炫酷的列表下拉刷新效果
- Angular 响应式表单之下拉框
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
网络、群体与市场
大卫·伊斯利(David Esley)、乔恩·克莱因伯格(Jon Kleinberg) / 李晓明、王卫红、杨韫利 / 清华大学出版社 / 2011-10-1 / CNY 69.00
过去十年来，现代社会中复杂的连通性向公众展现出与日俱增的魅力。这种连通性在许多方面都有体现并发挥着强大的作用，包括互联网的快速成长、全球通信的便捷，以及新闻与信息（及传染病与金融危机）以惊人的速度与强度传播的能力。这种现象涉及网络、动机和人们的聚合行为。网络将人们的行为联系起来，使得每个人的决定可能对他人产生微妙的后果。 本书是本科生的入门教材，同时也适合希望进入相关领域的高层次读者。它从交......一起来看看 《网络、群体与市场》 这本书的介绍吧!
