为元素绑定动态的属性要使用 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 ，直接使用冒号，后面加上绑定的属性的名字就行了 ...

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