v-bind指令与class类和style的内联样式的绑定

1.v-bind指令

1.v-bind的认知与用法

我们先创建一个新的页面去除掉一些元素保留剩下的元素然后对其添加一些属性和值

创建好了之后我们可以来在页面上显示一个图片用我们的image组件找到我们的本地图片的位置或者网络图片的url放入我们的src里面。

在src里面用到了我们的图片之后就会在页面中显示出来

可以看的我们的src里面放的的我们的图片地址，那么可不可以放入一个变量，就是这个变量是我们图片的路径然后放入我们的src里面也可以达到同样的效果。

这个时候就需要用到我们的v-bind指令了，这个指令可以让我们的变量转换成这个属性所接受的。

这个时候我们发现我们的图片又正常的显示出来了，所以v-bind是可以让我们的变量在属性中起到作用的，当然我们的v-bind也可以缩写成 " : " 它们的效果是一致的。

既然我们可以使用ref和v-bind放一张图片在页面上，那么可不可以放多张且实现交换呢？当然也可以使用轮播去swiper，但是我们现在要用的是ref和v-bind所以需要用到我们的定时器和数组来完成这个操作。

当然我们如果这样的话就也只能调用一张图片，那么我们就需要用到我们之前定义的变量名并且还有定义另一个变量来保证我们图片下标位置的切换，然后在定时器里面将我们要轮播的图片的路径给到我们另一个变量，在上面调用的还是我们之前的变量名。

我们可以看到在我们给数字位置的value后面中的[ ]里面不仅仅存放了一个变量还放入了一个%加上我们数组的长度这个意思是在每次到了这个数组的总长度时就会取余也就是我们的循环保证到了最后一张图片时会回到第一张图片。

v-bind还可以用在其他的组件上比如我们的button的属性上。

如果说我们想要禁用这两个属性的话就需要将它们的值改为false

这个时候就需要我们使用b-bind或者它的缩写 " : " 。

这样就发现了我们的这个两个属性带来的效果已经禁用了。

2.class类和style的内联样式的绑定

1.class类

我们如果需要控制一个组件时可以给他个class类名实现控制我们的组件，比如设置一个类名为box然后在style里面引用我们的box类名并赋予其属性来改变它在页面中的显示效果。

我们也可以使用两个类名来控制我们的组件，需要使用空格隔开来区分两个类名。

我们也可以使用我们的v-bind或者其缩写 " : " 来实现我们的第二个类名。

我们现在使用的最多的是我们的三元表达式的类型：class="？'类名':' ' "

我们也可以使用一个定时器来完成每过一段时间切换一次样式，需要在script里面定义一个变量，然后在定时器里面每一次都去取反。

可以从右边的预览查看效果，也可以去页面查看效果。

2.style的内联样式的绑定

我们在给组件设置属性和值的时候不单可以在style标签里面也可以使用行内样式来设置。

在上面可以知道我使用了两种方法来给宽高赋值一个是将数字和字符一起打上单引号，另一种是数字不打上单引号而字符打上了单引号，后面那个方法是方便我们给去做出改变的，就是从固定改为变成可以最大改变的。比如你使用了一个定时器来改变我们的高度，让它每隔一段时间就增加一点。

我们从游览器的页面效果可以明显的看到我们定义的高度发生了改变，切记如果要用这个方法的话一定需要使用 数字num+“单位px” 来完成。

因为我们使用的是数字可以不选择使用ref，当如果想要使用的话也可以使用。

可以看的效果是一样的，这个可以根据个人习惯来用，不过还是推荐使用ref因为我们对于使用ref还是比较常用的。