请选择 进入手机版 | 继续访问电脑版

Vue.js基础学习(三) -------------动态绑定v-bind的介绍和使用

[复制链接]
八步半的房间 发表于 2021-1-2 18:57:18 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Vue.js底子学习(三) -------------动态绑定v-bind的先容和使用

一、v-bind先容

v-bind:需要动态决定标签的属性的时候 可以使用到v-bind
语法糖的写法: : ,把v-bind替换为
二、v-bind的根本使用

动态绑定a标签的href属性,动态绑定img的src属性
  1.     [img]https://www.jianchenwangluo.com/'imgURL'  [/img]    [url=https://www.jianchenwangluo.com/aHref]百度一下[/url]     aHref:'http://www.baidu.com',     imgURL:'/img/=.jpg'
复制代码
三、v-bind动态绑定class

  1.       .Color{      color:green;    }    .acl{      color:red;    }             [size=5]{{message}}[/size]
  2.      [size=5]{{message}}[/size]
  3.     更换  
  4.    
复制代码
在绑定class的时候在类背面赋值一个Boolean值,这样可以决定它是否显示这个class属性
四、v-bind动态绑定style

  1. body>      [size=4]{{message}}[/size]
  2.     [size=4]{{message}}[/size]
  3.   
  4.    
复制代码
在v-bind里绑定一个元素的style属性的时候,给style赋值一个对象,对象的名字是属性名,值是在vue实例的data里界说的,以方便动态的改变它的值

来源:https://blog.csdn.net/weixin_45352819/article/details/112005426
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )