v-bind绑定与Class以及内联绑定

1.响应式图片显示及轮播

首先先创建一个页面,将V2的<script>里的属性删除,并且添加属性 setup :

在编写<image>标签给src值为{{ ref数组名 }},在定义一个数字变量,当数组的下标,因为下标冲零开始计算所以我们定义的默认值为一在通过数字变量++实现切换图片;

在image标签中 v-bind:src="img" 可以省略掉v-bind 只写一个  :  就好了 

我们运行可以看到,我只有3个图片,所以下标到2之后就不会显示了,所以我们可以对 let i=0 取余数,使用 % 取余, 这样 %几 看你的图片有几个,这样就可以循环轮播了;

输出看一下他就是一直在变化的,或者可以直观的看到就在定义一个变量

2.按钮属性不识别字符串时

我们先写一个 button 按钮,在为他添加一个loading属性就是一个假的加载,loading属性只支持Boolean-布尔类型,我们为他设置的属性大家可以看一下,他依旧在转,我们为他添加一个   v-bind:  属性或者 一个 :  

他就可以关闭掉了

还有就是禁用也是如此,他不支持字符串,只支持 Boolean 布尔类型 

为其添加 : 或者 v-bind之后它就可以使用了

3.Class绑定

一个标签是可以定义多个类名的,用空格分开,两个Style中有相同的 css,下面的则会覆盖掉上面的,比如:我添加了一个红色背景,他的蓝色背景就背覆盖掉了,删掉类名又恢复蓝色了,在删除num2类目,在后面编写一个 v-bind:class 动态类名,这样的效果和上面一样,但是在v-bind:class="" 中的" " 中直接写num2 他就是用不上的 ; 

我们也可以为他添加布尔类型先加大括号:

false则不会展示num2设置的css 我们在写一个view 标签 使用一个判断,通过变量bool 判断是否使用 num2 ;

用了这个我们就可以使用定时器来回切换他的颜色,关键代码用白框扩起来了;

4.内联

内联就是使用 style设置样式在他里面需要写一个大括号然后写属性,数字的话可以不加单引号但是添加了他的单位 px 就需要单引号了,但是在数字后面还是需要写  +'单位',之所以加单引号是因为他在双引号里面,有两个属性用逗号隔开;

写有 - 号的要么使用驼峰要么使用单引号包起来;

在这个内联中我们也可以使用变量比如说使用,当然我们也可以使用定时器去修改他;

简单来说就是不支持String类型的属性值可以使用 v-bind: 来调试,让改属性变成可以适应String类型;