我是怎么学会vue的07:v-bind属性绑定(简写用冒号)

白话前端

我们之前学习了如何绑定标签的内容:使用模板{{ }}(Mustache语法),但这个语法只能用来绑定内容,不能用来绑定标签的属性。

实际开发中,标签的属性不是写死的,需要先从服务器请求,服务器返回json数据,把数据放进vue实例的data,再把data和标签的属性做绑定。

绑定方法:要给哪个属性绑定值,就在该属性前面加上v-bind:即可。

常用到的标签和属性如:a标签的href属性、img标签的src属性等。

  1. html

    <img v-bind:src="imgUrl" alt=""/>
  2. 数据

    data:{
       imgUrl:'abc.com/def.jpg'
    }
错误演示:
<img src="{{imgUrl}}">,这样写会把{{imgUrl}}解析成一个字符串,Mustache语法不支持绑定属性,只支持绑定内容,比如这样:<h2>{{message}}</h2>

缩写:使用冒号即可

<img v-bind:src="imgUrl" alt=""/> <!--不缩写-->
<img :src="imgUrl" alt=""/> <!--缩写-->
阅读 850

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏