绑定属性:v-bind

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

为元素绑定动态的属性要使用 v-bind 这个指令,指令就是一些特别的属性,一般都会用 v- 作为前缀 ... 比如我们先添加一个 图像标签 ... 这个标签的 src,也就是图像的源这个属性我们可以使用 v-bind 指令绑定一个 ... 给这个指令加上一个参数,名字是 src .. 指令和参数之间用冒号分隔开 ..

它的值是一个表达式,先用一下 imageSrc ... 在应用的数据里面,我们可以添加一个 imageSrc ... 它的值就是图像的一个地址 ... 可以可以复制一下图像的地址,再把它粘贴过来...

到浏览器上预览一下 ... 页面上会显示一张图像 .. 再查看一下这个图像元素 ... 它的 src 属性的值就是我们使用 v-bind 给元素绑定的 ...

在这个图像元素上,我们再给它绑定一个样式 ... 同样使用 v-bind .. 参数是 style ... 给它提供一个对象 ... 设置一下 width 属性的值,可以使用 imageWidth 来表示 ... 再去添加一个这样的数据 ... imageWidth ,它的值设置成 100%

回到浏览器 ... 现在这个图像元素上会应用一个 style 属性,里面设置了图像的 width 属性 ...

打开浏览器的 Console ,我们再去设置一下 imageSrc 这个属性的值 .. 使用一个新的图像地址 ...

你会发现,页面上显示的图像也会随着变化 ...

再设置一下 imageWidth ... 它的值我们用了 v-bind:style ,把它绑定给了元素的 width 样式 ... 设置了 imageWidth 的值,图像显示的宽度会随着变化 ...

这个 v-bind 还有一种简单的形式 .. 我们可以去掉 v-bind ,直接使用冒号,后面加上绑定的属性的名字就行了 ...

这样做跟之前的效果是一样的 ...

绑定属性:v-bind《 Vue.js 前端框架 》

统计

10380
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点