视频讲解vue2基础之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
<template>
<view>
<view class="box" :style="{background:bgcolor}" @click="dianji">
<view class="num">{{qnum}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgcolor:"pink",
};
},
methods:{
dianji(){
//将随机数先转换为字符串类型，然后再从第3个开始截取，截取6个长度
let color ='#'+String(Math.random()).substr(3,6)
//实现点击时随机数的一个变化
let num = String(Math.random()).substr(3,1)
console.log(color)
console.log(num)
this.bgcolor=color
this.qnum=num
},
}
}
</script>class类名动态绑定
详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili
003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili
class类名动态绑定的用处与上面所讲的style动态绑定的用处一样重要，都是为了像是样式的动态绑定所构造的写法，只不过前者是在标签里面进行书写（特点：简便，适合少数样式的动态绑定）后者是在css中进行书写（特显，适合全体大型布局及多种数量样式的动态绑定）。
一：官方给出的写法
详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili
003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili
未点击时
点击后
<view class="***" :class="***" @click="***"></view>思路说明：
详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili
003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili
我们创建一个名为：box2的样式类，然后再通过：class=" "这个属性绑定我们在return返回值里面的kongzhi1,我们先要把kongzhi1给他一个默认值为：true，然后再通过:class="{box3:kongzhi1}"，此时本标签所呈现的初始样式已经是box3的样式，然后我们再给此标签一个点击事件classdianji1，并将里面写为：this.kongzhi1=!this.kongzhi1 意思是当我们每一次点击时都会对我们现在的布尔值进行一个取反，这样就呈现了一个当我们每次点击时box3样式与box2样式一个来回切换的形式！！！
代码实现：
<template>
<view>
------------class类名的绑定------------------
--1--官方给出的方法--实现
<view class="box2" :class="{box3:kongzhi1}" @click="classdianji1"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
kongzhi1:true,
kongzhi2:true
};
},
methods:{
//class类名绑定事件点击时的变换
classdianji1(){
//每一次点击时将kongzhi进行取反，从而实现来回变换的效果
this.kongzhi1=!this.kongzhi1
},
}
}
</script>
<style lang="scss">
.box2{
width: 300rpx;
height: 300rpx;
background-color: orange;
}
.box3{
border-radius: 30px;
width: 300rpx;
height: 300rpx;
background-color: red;
}
</style>二：自创三元表达式写法
详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili
003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili
未点击时
点击后
思路说明：
详细的视频讲解：002vue_样式的动态绑定_哔哩哔哩_bilibili
003vue_样式动态绑定（小案例）_哔哩哔哩_bilibili
其实这个三元表达式的点击事件与上面所讲述的一样。
不同之处：
再标签里面，我们用:class="kongzhi2 ? 'box3' : ''的意思为：当我们在return中设置的值为”真“时就会显示box3如果为”假“时就会显示空，因为我们已将在此标签的最前面定义了一个box2，所以为空时实际上就是显示box2样式！！！
所以综上所述，我们可以结合一个点击事件，每次点击时实现一个取反的过程，就会实现与上面同样的效果！！！
代码实现：
<template>
<view>
------------class类名的绑定------------------
--2--三元表达式--实现
<view class="box2" :class="kongzhi2 ? 'box3' : '' " @click="classdianji2" ></view>
</view>
</template>
<script>
export default {
data() {
return {
kongzhi2:true
};
},
methods:{
classdianji2(){
//每一次点击时将kongzhi进行取反，从而实现来回变换的效果
this.kongzhi2=!this.kongzhi2
}
}
}
</script>
<style lang="scss">
.box2{
width: 300rpx;
height: 300rpx;
background-color: orange;
}
.box3{
border-radius: 30px;
width: 300rpx;
height: 300rpx;
background-color: red;
}
</style>腾讯云开发者
