视频讲解vue2基础之style样式class类名绑定

目录

 style样式的动态绑定

class类名动态绑定

一：官方给出的写法

二：自创三元表达式写法

---

 详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

 style样式的动态绑定

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

style样式的动态绑定是vue中比较常用的一种动态的改变我们标签中的样式属性的一种方法：

:style="*****"

@click="****"

上面是使用的绑定属性，当然我们知道，我们需要一个点击事件作为前台与后台交互的通道。

第一步：

说明：我们现在bgcolor中设置一个默认的颜色值，

然后再通过String(Math.random()).substr(3,6),先将这个math数学函数中的随机数转换成字符串类型，然后再.substr(3,6)截取后台打印的随机数的从第三位开始截取，一直截取6位数，然后我们再从前面加上一个‘#’来把他拼接成一个十六进制的颜色格式并且将他赋值给color，然后将color在赋值给我们vm里面的bgcolor。

最终实现了一个点击时，随机变换颜色的一个效果！！！

第二步：

我们在创建一个前台架构，并写在第一个标签里面，并在dianji事件里面写上一个随机数，当我们点击时颜色中间的数也会随机发生变化！

两步实现：

当我们点击正方形时，颜色会发生随机的改变，同时我们设置再正方形中间的数也会随机的发生改变！！！ 

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili 

静态效果演示：

没点击时：

点击后：

 

 代码实现：

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

class类名动态绑定

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

class类名动态绑定的用处与上面所讲的style动态绑定的用处一样重要，都是为了像是样式的动态绑定所构造的写法，只不过前者是在标签里面进行书写（特点：简便，适合少数样式的动态绑定）后者是在css中进行书写（特显，适合全体大型布局及多种数量样式的动态绑定）。

一：官方给出的写法

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

未点击时

点击后

思路说明：

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

 我们创建一个名为：box2的样式类，然后再通过：class=" "这个属性绑定我们在return返回值里面的kongzhi1,我们先要把kongzhi1给他一个默认值为：true，然后再通过:class="{box3:kongzhi1}"，此时本标签所呈现的初始样式已经是box3的样式，然后我们再给此标签一个点击事件classdianji1，并将里面写为：this.kongzhi1=!this.kongzhi1 意思是当我们每一次点击时都会对我们现在的布尔值进行一个取反，这样就呈现了一个当我们每次点击时box3样式与box2样式一个来回切换的形式！！！

代码实现：

二：自创三元表达式写法

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

未点击时 

点击后

 

思路说明：

详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili

003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili

其实这个三元表达式的点击事件与上面所讲述的一样。

不同之处：

再标签里面，我们用:class="kongzhi2 ? 'box3' : ''的意思为：当我们在return中设置的值为”真“时就会显示box3如果为”假“时就会显示空，因为我们已将在此标签的最前面定义了一个box2，所以为空时实际上就是显示box2样式！！！

所以综上所述，我们可以结合一个点击事件，每次点击时实现一个取反的过程，就会实现与上面同样的效果！！！

代码实现：