![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
5.1.4 v-bind
v-bind指令主要用于响应更新HTML元素的属性,将一个或多个属性或者一个组件的prop动态绑定到表达式。
【例5.13】中,将按钮的title和style属性通过v-bind指令进行绑定,这里对于样式的绑定,需要构建一个对象。其他的对于样式的绑定方法,将在后面的章节中详细介绍。
【例5.13】v-bind指令(源代码\ch05\5.13.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P85_164951.jpg?sign=1739181630-aZLxMc0BUYHkbgQd54YeoH7TB10gx1Tq-0-a1df53826c0f8468020ab0f609be65c1)
在浏览器中运行程序,按F12键打开控制台并切换到“Elements”选项,可以看到数据已经渲染到了DOM中,结果如图5-21所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P85_28325.jpg?sign=1739181630-4OkdwBOrwmBbpXqf5XoXCd0xr9J2AKtV-0-09c17a21bf3d0d0315c3a5c5d0e859d9)
图5-21 v-bind指令