数据工厂平台-5:vue的动态绑定解决超链接问题

上节课我们已经打造成了：

这样的写法，全部用[[ ]] 来替换。

但是发现依然没有「成功」 实现超链接跳转。

感觉就好像，这个[[i.link_url]] 并没有真正的数据进来一样。

其实这就是vue的一个特性，「动态绑定」。不绑定，那么dom的数据变量和bom的标签内属性就没啥关系，当然不会有真实数据。

那么要如何绑定？

很简单，在我们console里，人家已经给你提示了：

让我们给这个 属性href前面加个冒号的意思：

现在刷新页面 再看下：

发现可以「成功」跳转了

那么为什么小小的冒号，会有这么大功能呢？其实它就是 告诉浏览器，这个href属性，跟下面的Vue绑定了，它「罩」了。

而实际上，这个冒号只是一个简写，它的完整写法是：「v-bind:」

现在英文就是绑定的意思了，因为用的太多，所以开发者规定可以简写一个冒号代替。

现在页面成功了。我们来感受下动态绑定吧：

我们通过再控制台console，直接输入命令，来更改bom里面的数据all_links，看看页面上的超链接会不会同步受到影响。

输入这么一句：

这个div 就是我们的：

然后all_links就是说它内部的变量：all_links, pop(0)就是说 删除一个数据。

然后我们回车看看：

可以看到 数据被删除了，而且dom层的循环 也瞬间作出响应，删了一个超链接a标签。

我们现在学会了动态绑定，那么最后再抛出一个观念：「双向绑定」

相比较动态v-bind: 而言 双向绑定就是，如果我们改变dom层，那bom层的数据也会发生变化。

❝我们下节课，会设计一个搜索输入框。当用户输入查询关键字后，我们会用方法来实现筛选all_links的数据。这样页面上的a标签也会响应的作出改变。然后我也会用原始js来实现一次， 让大家看清楚 二种方法对于这个搜索功能的实现复杂度 差距有多大。 ❞