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

最新推荐文章于 2023-12-26 23:39:16 发布

淼学派对

最新推荐文章于 2023-12-26 23:39:16 发布

阅读量1.8k

点赞数 5

分类专栏： vue uni-app 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/lbcyllqj/article/details/127948618

版权

vue 同时被 2 个专栏收录

22 篇文章 6 订阅

订阅专栏

uni-app

11 篇文章 5 订阅

订阅专栏

详细的视频讲解：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>