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

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

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

微信图片_20220706095458.png

这样的写法,全部用[[ ]] 来替换。但是发现依然没有「成功」 实现超链接跳转。

微信图片_20220706095507.png


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

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

那么要如何绑定?

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

微信图片_20220706095836.png

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

微信图片_20220706095524.png

现在刷新页面 再看下:发现可以「成功」跳转了

微信图片_20220706095530.png微信图片_20220706095536.png

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

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

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

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


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


输入这么一句:

微信图片_20220706095542.png

这个div 就是我们的:

微信图片_20220706095547.png

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

然后我们回车看看:

微信图片_20220706095553.png

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


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


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

相关文章
|
4天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
4天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
12 0
|
3天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
3天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
5 0
|
3天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
4天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
4天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
989 0
|
4天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
14 0
|
4天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为"/h5/party/pc/",在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题