v-bind的基本使用及动态绑定class(对象/数组)

10-1.v-bind的基本使用

v-bind的src和href属性

前面我们学的都是将data中的值放在DOM中进行显示,除了这些,在开发中不仅这些需要被动态响应式显示

有时候属性可能也不是写死的,也是可能根据某些变量进行动态决定的

例如图片中的src这个属性,如果是一些简单的图标,直接写死进行引用即可;但是真实开发中,src肯定不是写死的

比如淘宝中的轮播图,你肯定是先向服务器发送一个请求,然后服务器给你返回一个数据,而这个数据包含了很多url,zhexieurl需要动态的放在src里面进行显示,而不是直接写死的

不仅是轮播图,很多网站上的图片都是这样,图片都不是写死的,都是根据服务器的数据,将数据请求过来放在data中,再动态的将这个绑定在src属性上,就像之前在div中用{{message}}来绑定那样

如果想要绑定属性,就需要使用v-bind

当然,除了img中的src属性,还有a中的href属性,这些都是可以动态绑定的

我们来试一下,随便在网站上复制一个图片地址

运行结果如下:

图片和超链接都能够正常显示和使用

v-bind的语法糖

语法糖,即这个指令的简写

v-bind:src=”” 可以简写成 :src

运行结果与上面相同,如下:

10-2.动态绑定class属性(对象/数组)

对象语法写样式

运行结果如下:

类的样式如果是多个还可以这样写:

运行结果如下:

如果我们想再添加一个按钮,点击按钮取消和应用样式:

需要先用v-on来监听事件click,再给click事件里面定义一个函数,来进行取反

点击按钮就会取消样式,运行结果如下:

这里要注意两点:

1.使用对象语法来进行写样式

2.在v-bind后的样式不影响再写普通样式,两种样式会合并,同时存在

如果觉得这样用对象方法写语句太长,可以放在methods中

在methods中拿变量一定要加this

这样写与刚才运行结果相同

数组语法

相对于对象语法用的比较少

运行结果如下:

- 写作不易,大家多多关注,谢谢啦 -

---web分享,分享的不只是web

(0)

相关推荐

  • 书法知识大考V‖

    要想学好书法,常识不能少!今天的考试开始! 第六十题:文徵明小楷书法作品的风格特征是什么? 取法"二王",温纯精绝.传世作品有<归去来兮辞><离骚经>等. ...

  • 45岁蒋勤勤穿衣真放得开,一袭深V连衣裙走红毯,身材真有“料”

    对于女明星们来讲,深V领款式的连衣裙是经常会穿搭的单品,这种单品在舞台或红毯上的实用性很强,上身率也非常高,不管是对于身材骨感的女性还是身材丰满的女性都非常友好,身材丰满的女性可以通过深V领的版型穿出 ...

  • 徐帆人到中年仍很靓,一袭小V领礼服优雅浪漫,比年轻时还有韵味

    一袭浅色的礼服,低调而华贵,将徐帆的气质衬托得恰到好处,礼服的设计比较简单,小V领,露出精致光泽的锁骨,脖颈的线条柔美感足够,与肩膀处的线条形成一个很好的衔接,有收腰的设计,将身材的纤细匀称.柔软美丽 ...

  • 工欲善其事,必先利其器。盘点新媒体大V都...

    工欲善其事,必先利其器.盘点新媒体大V都在用的工具,让你省出一半时间!这样的效率一个月不赚3000,5000真的说不过去! 1.同步记录工具 石墨文档,和word文档使用起来差不多.可以手机电脑同步, ...

  • 看完王莫涵的这组粉色深V吊带裙照片,你就知道臂环多么重要!

    提起王莫涵,虽然龙之少年是她的首部影视作品,但是初入戏场的她却毫不胆怯.她纯真清甜而又充满灵气的形象,以及认真的揣摩每一个角色,使得她拍摄的这部影视作品得到了大众人的认可.最近小编收录到一组王莫涵参加 ...

  • v

    ​盛夏饮黄芪人参汤 一般脾胃虚弱的人,由于后天气血生化之源不足,必然导致上焦心肺的气不足.到夏天天气炎热时,太盛的暑热就更加损伤元气,使人困乏倦怠,嗜睡,精神差,四肢无力,两脚萎软不能站立的.早晚气温 ...

  • 【摘要】孙天琦:试析“V+个+VP”结构的句法属性及生成机制 ——兼议汉语的“隐性述补结构”

    "打了个落花流水"一类"V+个+VP"结构是现代汉语中比较特殊的一种结构,关于这类结构的语法性质以及其中"个"的语法地位等问题,以往学界进行 ...

  • 罗振宇的这个方法,人人都成为知识大V

    昨天在得到看到罗胖一个视频,讲的是怎样提升影响力? 看完后深受启发,感觉要是拿这一套方法出来,人人都可以做一个知识大V. 平时看别人写的内容,好有深度怎么懂的那么多,平时只能点赞羡慕,看完罗胖的分享, ...

  • 精雕细刻的钩针V领T恤女装

    时光如梭,转眼我开始迎接自己的第56个儿童节.在这个特别的节日里,完成了一件特别的作品.急不可待地分享给大家.原作品没有完整的图解.只有单元花片图解.前两期公众号已经发了,这里就不再重复.每当想模仿一 ...