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

2022-05-19 13:57:55 浏览数 (2)

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

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

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

感觉就好像,这个[[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来实现一次, 让大家看清楚 二种方法对于这个搜索功能的实现复杂度 差距有多大。 ❞

0 人点赞