class类和style内联样式的绑定

news2024/10/7 20:24:50

这里的绑定其实就是v-bind的绑定，如代码所示，div后面的引号就是v-bind绑定，然后大括号将整个对象括起来，对象内先是属性，属性后接的是变量，这个变量是定义在script中的，后通过这个变量，来控制属性，实现绑定。
在这里插入图片描述
先设置个盒子，并为其设置style样式，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box"></view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(false)
	const Size = ref(30) ;
	let i = 0 ;  //这个值不在模板层渲染，可以不用ref

	setInterval(()=>{
		i++ ;
		Size.value += i ;
		isactive.value = !isactive.value
		picurl.value = arrs.value[i%4] ;
	
	},1000)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

效果如下：
在这里插入图片描述
再添加一个类名，为其设置样式，也就是说，用两个类名作用于同一个盒子。继续在盒子中添加文字，设置字体大小，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box active">v-bind指令</view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(false)
	const Size = ref(30) ;
	let i = 0 ;  //这个值不在模板层渲染，可以不用ref

	setInterval(()=>{
		i++ ;
		Size.value += i ;
		isactive.value = !isactive.value
		picurl.value = arrs.value[i%4] ;
	
	},1000)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

效果如下：
在这里插入图片描述
如图所示，现在实现了两个类名共同作用于一个类名，且在两个类名定义相同属性的情况下，下方的样式会优先作用于类。

现在，尝试把active变成动态的值，先删掉之前定义的active，现在用v-bind形式定义active，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "'active'">v-bind指令</view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(false)
	const Size = ref(30) ;
	let i = 0 ;  //这个值不在模板层渲染，可以不用ref

	setInterval(()=>{
		i++ ;
		Size.value += i ;
		isactive.value = !isactive.value
		picurl.value = arrs.value[i%4] ;
	
	},1000)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

这里的显示效果和刚刚的效果相同。这里请注意定义active时的格式，尤其是在使用动态绑定，要加上一个单引号，以表示它是字符串类型的类名，否则没法作用上的。

接下来，尝试用一个值来控制active，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:true}">v-bind指令</view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(false)
	const Size = ref(30) ;
	let i = 0 ;  //这个值不在模板层渲染，可以不用ref

	setInterval(()=>{
		i++ ;
		Size.value += i ;
		isactive.value = !isactive.value
		picurl.value = arrs.value[i%4] ;
	
	},1000)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

如开头所说的，这里用大括号将整个对象括起来，对象内包含了属性active，属性后接的是变量，可以写上true或者false，以控制active，这里我们用的是true，效果如下：
在这里插入图片描述

还可以将这个变量定义在script中，后通过这个变量，来控制属性，实现绑定，这里我们定义变量为false，记住一定要用ref来定义，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:isactive}">v-bind指令</view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(false)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

效果如下：
在这里插入图片描述
这是一种方法， 日常使用中，还可以使用三元表达式来控制active，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "true?'active' : ' ' ">v-bind指令</view>
</template>

<script setup>
	import { ref } from 'vue';
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(true)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

当然，三元表达式的判断条件也可以填入刚刚设置的isactive变量。
接下来，把变量放入定时器，让其动态改变，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:isactive}">v-bind指令</view>
	<view calss="box" :class = "isactive?'active':'box'"></view>
</template>

<script setup>
	import { ref } from 'vue';

	setInterval(()=>{
	isactive.value = !isactive.value
	},1000)
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(true)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	width: 200px;
	height: 200px;
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

成功：

在这里插入图片描述
以上两种都是常用的方式，接下来演示一下内联的样式，先写个简单的内联样式，设置第二个box的宽度，要注意的是，内联样式的权重更高，会覆盖其他样式，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:isactive}">v-bind指令</view>
	<!-- <view calss="box" :class = "isactive?'active':'box'"></view> -->
	<view class="box" style = "width: 300px;">内联样式</view>
</template>

<script setup>
	import { ref } from 'vue';

	setInterval(()=>{
	isactive.value = !isactive.value
	},1000)
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(true)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	width: 200px;
	height: 200px;
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

效果如下：
在这里插入图片描述
如果要使用变量，就需要在style的前面加上冒号，并以对象的形式定义，刚刚定义了宽度，要用单引号括起来，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:isactive}">v-bind指令</view>
	<!-- <view calss="box" :class = "isactive?'active':'box'"></view> -->
	<view class="box" :style = "{width:'300px'}">内联样式</view>
</template>

<script setup>
	import { ref } from 'vue';

	setInterval(()=>{
	isactive.value = !isactive.value
	},1000)
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(true)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	width: 200px;
	height: 200px;
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

或者用数字+‘单位’(例：260 + ‘px’ )这样的形式写出，也是可以的。

通过内联，也可以实现动态变量，将字体大小定义为数字 + ‘单位’的形式，然后用变量替换掉数字，并将其放入定时器中，代码如下：

<template>
	<view>
		<view><image :src="picurl"></image></view>
	</view>
	<button :loading="false">按钮！</button>
	<view class="box" :class = "{active:isactive}">v-bind指令</view>
	<!-- <view calss="box" :class = "isactive?'active':'box'"></view> -->
	<view class="box" :style = "{width:'300px',height:260 + 'px',fontSize:fontsize + 'px'}">内联样式</view>
</template>

<script setup>
	import { ref } from 'vue';
	let i = 0 ;
	let fontsize = ref(30) ;
	setInterval(()=>{
	isactive.value = !isactive.value
	i ++ ; 
	fontsize.value += i ;
	},1000)
	const arrs = ref(
	["../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg"]
	) ;
	const picurl = ref("../../static/pic1.png") ;
	const isactive = ref(true)
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: orange;
	font-size: 20px;
}
.active{
	width: 200px;
	height: 200px;
	background: green;  //下面的CSS可以覆盖上面的
	color: white;
}
</style>

效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1898166.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库国产化之路(一)

数据库国产化之路(一)

数据库国产化之路(一) 1、前言&#xff1a;适配海量数据库过程中的一些记录&#xff0c;备忘用 2、海量数据库基于的pg版本&#xff0c;查看PG_VERSION文件为9.2。 3、MySQL中的IF函数替代&#xff0c;一开始的方案是从网上找了个if函数&#xff0c;后来发现CASE WHEN其实能完成…
阅读更多...
【c语言】轻松拿捏自定义类型

【c语言】轻松拿捏自定义类型

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 前言 一、结构体 1.结构体类型的定义和使用 1.1 结构体类型声明 1.2 结构体变量的创建和初始化 1.3 结构体变量成员的访问 1.4 结构体的特殊声…
阅读更多...
[深度学习]卷积理解

[深度学习]卷积理解

单通道卷积 看这个的可视化就很好理解了 https://github.com/vdumoulin/conv_arithmetic/blob/master/README.md 多通道卷积 当输入有多个通道时,卷积核需要拥有相同的通道数. 假设输入有c个通道,那么卷积核的每个通道分别于相应的输入数据通道进行卷积,然后将得到的特征图对…
阅读更多...
tinyshop商城学习

tinyshop商城学习

1、使用badboy屏幕录制工具&#xff0c;获得服装购物业务的结果&#xff0c;生成.jmx文件 2、在JMeter中新建线程组&#xff0c;导入.jmx文件 3、完成进入商城&#xff0c;登录&#xff0c;服装页面进入&#xff0c;随机选择服装&#xff0c;添加购物车&#xff0c;开始结算&…
阅读更多...
Qt扫盲-QRect矩形描述类

Qt扫盲-QRect矩形描述类

QRect矩形描述总结 一、概述二、常用函数1. 移动类2. 属性函数3. 判断4. 比较计算 三、渲染三、坐标 一、概述 QRect类使用整数精度在平面中定义一个矩形。在绘图的时候经常使用&#xff0c;作为一个二维的参数描述类。 一个矩形主要有两个重要属性&#xff0c;一个是坐标&am…
阅读更多...
6款天花板级的国产BI大盘点

6款天花板级的国产BI大盘点

以下是六款天花板级的国产BI工具的盘点&#xff0c;包括奥威BI、帆软BI、思迈特BI、永洪BI、观远BI和亿信华辰BI。这些工具各有其独特的优点和擅长的领域。 1. 奥威BI 优点&#xff1a; 无缝对接ERP系统&#xff1a;与金蝶、用友等全版本ERP系统无缝对接&#xff0c;方便用户…
阅读更多...
软件游戏d3dcompiler_43.dll丢失怎么办，总结几种有效的方法

软件游戏d3dcompiler_43.dll丢失怎么办，总结几种有效的方法

在使用电脑时&#xff0c;可能会碰到找不到d3dcompiler_43.dll的问题。即在使用过程中&#xff0c;突然弹出一个提示“d3dcompiler_43.dll丢失”&#xff0c;由于此文件的缺失&#xff0c;部分程序将无法启动。为恢复正常使用&#xff0c;我们需要修复此文件。接下来&#xff0…
阅读更多...
el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能

el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能

数据少的话&#xff0c;可以前端实现&#xff0c;如果多的话&#xff0c;建议还是请求接口比较合理父组件&#xff1a; <template> <div class"home"> <!-- <img alt"Vue logo" src"../assets/logo.png"> <HelloWorld …
阅读更多...
Spring源码十一：事件驱动

Spring源码十一：事件驱动

上一篇Spring源码十&#xff1a;BeanPostProcess中&#xff0c;我们介绍了BeanPostProcessor是Spring框架提供的一个强大工具&#xff0c;它允许我们开发者在Bean的生命周期中的特定点进行自定义操作。通过实现BeanPostProcessor接口&#xff0c;开发者可以插入自己的逻辑&…
阅读更多...
ServiceImpl中的参数封装为Map到Mapper.java中查询

ServiceImpl中的参数封装为Map到Mapper.java中查询

ServiceImpl中的参数封装为Map到Mapper.java中查询&#xff0c;可以直接从map中获取到key对应的value
阅读更多...
吴恩达机器学习作业ex7:K 均值聚类和主成分分析(Python实现)详细注释

吴恩达机器学习作业ex7:K 均值聚类和主成分分析(Python实现)详细注释

文章目录 1 K 均值聚类1.1 实施 K-means1.1.1 寻找最近的中心点1.1.2 计算中心点均值 1.2 示例数据集上的 K-means1.3 随机初始化1.4 用 K-means 压缩图像1.4.1 对像素进行 K 均值分析 2 主成分分析2.1 样例数据集2.3 利用 PCA 降低维度2.3.1 将数据投影到主成分上2.3.2 重建数…
阅读更多...
满足GMSL静电防护要求的方案

满足GMSL静电防护要求的方案

什么是GMSL&#xff1f;它是做什么用的&#xff1f;它有什么优点&#xff1f;设计GMSL防静电有啥难度&#xff1f; 带着这些疑问我们先了解下什么是GMSL。 一&#xff0e;简述 GMSL GMSL&#xff08;Gigabit Multimedia Serial Link&#xff09;即千兆多媒体串行链路&#xf…
阅读更多...
vs code 波浪线报错

vs code 波浪线报错

这种红色波浪线的 VS code 报错&#xff0c;之前我都是直接忽略&#xff0c;因为不影响运行&#xff0c;但是我看着就很闹心想要给它去掉。 明明这个module 在啊&#xff0c;为啥一直报错 Cannot find module 今天知道原因了&#xff1a; 为了图方便&#xff0c;我 的 VS …
阅读更多...
HPR3B-30A1-201、HPR3B-30A2-211-M4液压比例减压阀放大器

HPR3B-30A1-201、HPR3B-30A2-211-M4液压比例减压阀放大器

HANDOK HYDRAULIC比例减压阀HPR2P-30A1-201、HPR2P-30A1-201-M5、HPR3S-40A1-201-M3、HPR3Q-40A1-201-M2、HDPR3Q-40A1-201-M0、HPR3B-30A2-211、HPR3B-40F1-212 FOR SBS120/140、HDSV4B-A1-232、HPR3NB-30A-221、HDSV3B-A1-232-GO-PVD、HPR3B-30A1-213、HSVD3B-A1-232-GO-PSVD…
阅读更多...
网络-calico问题分析

网络-calico问题分析

项目场景&#xff1a; calico-node日志提示 Failed to auto-detect host MTU - no interfaces matched the MTU interface pattern. To use auto-MTU, set mtuifacePattern to match your hosts’s interfaes. 同时&#xff0c;cali开头网卡的mtu是1440大小 原因分析&#xff…
阅读更多...
每日复盘-20240705

每日复盘-20240705

今日关注&#xff1a; 20240705 六日涨幅最大: ------1--------300391--------- 长药控股 五日涨幅最大: ------1--------300391--------- 长药控股 四日涨幅最大: ------1--------300391--------- 长药控股 三日涨幅最大: ------1--------300391--------- 长药控股 二日涨幅最…
阅读更多...
windows安装jdk21

windows安装jdk21

下载 下载zip解压 设置环境变量 设置JAVA_HOME环境变量 Path环境变量添加如下值%HAVA_HOME%\bin 打开新的cmd&#xff0c;输入java --version查看效果
阅读更多...
C++学习第十三天——stack/queue的使用及底层剖析双端队列容器适配器

C++学习第十三天——stack/queue的使用及底层剖析双端队列容器适配器

✨ 少年的旅途应是星辰大海 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&am…
阅读更多...
安装Linux虚拟机

安装Linux虚拟机

点击创建新的虚拟机 选择高级 系统自定义推荐 选择稍后安装 选择Linux 虚拟机命名并且选择创建位置 系统自定义 系统自定义推荐 系统自定义推荐 选择安装好的iOS文件 点击完成 选择编辑虚拟机设置 进入后选择第一个Install red hat enterprise 选择常用语言 设置…
阅读更多...
【数据结构】（6.3）堆的应用——堆排序（C语言）

【数据结构】（6.3）堆的应用——堆排序（C语言）

系列文章目录 文章目录 系列文章目录前言1. 堆排序的基础知识2. 堆排序详解2.1 堆排序整体思路2.2 思路详解2.2.1 建堆2.2.2 堆排序完整代码2.2.3 输出数据 3. 时间复杂度分析 前言 1. 堆排序的基础知识 堆排序&#xff08;Heap Sort&#xff09;就是对直接选择排序的一种改进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023