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