class类和style内联样式的绑定

这里的绑定其实就是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.mfbz.cn/a/774651.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CAN转PN网关模块连接激光切割机的配置方法

CAN转PN网关模块连接激光切割机的配置方法

激光切割机在工业生产中被广泛应用&#xff0c;而激光发射器与控制设备常以不同的协议存在两者之间&#xff0c;CAN总线和Profinet以各自的特点被广泛用于设备当中。本文将介绍介绍兴达易控CAN转Profinet网关模块&#xff08;XD-PN_CAN20&#xff09;连接 CAN 激光切割机的使用…
阅读更多...
【算法 - 哈希表】两数之和

【算法 - 哈希表】两数之和

这里写自定义目录标题 两数之和题目解析思路解法一 &#xff1a;暴力枚举 依次遍历解法二 &#xff1a;使用哈希表来做优化 核心逻辑为什么之前的暴力枚举策略不太好用了&#xff1f;所以&#xff0c;这就是 这道题选择 固定一个数&#xff0c;再与其前面的数逐一对比完后&…
阅读更多...
如何在 Ubuntu上搭建 LAMP

如何在 Ubuntu上搭建 LAMP

远程登录 Ubuntu系统环境 ssh (User)(IP) # 比如&#xff1a;ssh lennlouis192.168.207.128 为安全起见&#xff0c;建议你使用 root 登录 VPS 后创建一个具有 sudo 权限的帐号。 安装和配置 Apache 2 Apache Http Server 是一个开源的&#xff0c;非常流行&#xff0c;使用…
阅读更多...
RAG 为什么需要文本分割（Chunking）

RAG 为什么需要文本分割（Chunking）

Picone上的一个博客&#xff0c;翻译过来学习一下&#xff0c;其中加入了一些个人的理解和调整&#xff0c;有兴趣更深入研究的可以看一下文章的原文。 为什么需要文本分割&#xff08;Chunking&#xff09; 在构建与LLM相关的应用程序时&#xff0c;Chunking是将大量文本分解…
阅读更多...
anaconda命令大全

anaconda命令大全

目录 查看所有虚拟环境查看某虚拟环境安装的包创建虚拟环境激活创建好的虚拟环境回到之前的环境删除创建的虚拟环境查看conda所在的位置、虚拟环境位置等信息conda修改虚拟环境所在的位置 查看所有虚拟环境 conda env list查看某虚拟环境安装的包 激活要查看的虚拟环境之后&a…
阅读更多...
【黑马头条】 article微服务编译失败，包com.heima.model.common.article.dtos 不存在

【黑马头条】 article微服务编译失败，包com.heima.model.common.article.dtos 不存在

解决办法&#xff0c; 将 model微服务重新打包编译下载 然后在service的pom文件里面加上版本号 这样编译就不会找不到啦
阅读更多...
SQL注入【1】——通用漏洞/SQL注入/mysql跨库/ACCESS偏移

SQL注入【1】——通用漏洞/SQL注入/mysql跨库/ACCESS偏移

一、知识点: 1、脚本代码与数据库前置知识 2、Access数据库注入-简易&偏移 3、MYSQL数据库注入-简易:权限跨库 二、前置知识: &#xff08;一&#xff09;SQL注入漏洞产生原理分析 SQL注入产生条件&#xff1a;根本条件&#xff1a;可控变量、特定函数。 脚本代码在实现…
阅读更多...
数学建模MATLAB绘图大全

数学建模MATLAB绘图大全

最近快要开始一年一度的数学建模竞赛啦&#xff0c;接下来争取每天更一篇数学建模算法&#xff01;&#xff08;当然这是理想状态下&#xff09;&#xff0c;今天就先更一些MATLAB常用的绘图吧&#xff0c;论文赏心悦目的关键就在于丰富多彩的图&#xff0c;好看的图一定会成为…
阅读更多...
MySql主从同步延迟怎么办？

MySql主从同步延迟怎么办？

文章目录 什么是MySQL主从架构主从架构的组成工作原理主从复制的步骤主从架构的优点主从架构的缺点 什么是主从同步延迟为什么会导致主从延迟主从延时的排查和解决如果发现主从数据不一致怎么办&#xff1f; 我们常说的业务量越来越大&#xff0c;I/O访问频率过高&#xff0c;单…
阅读更多...
2021-06-15 protues（ISIS）脉冲发生器仿真仪表使用

2021-06-15 protues（ISIS）脉冲发生器仿真仪表使用

缘由这个脉冲发生器怎么连线_编程语言-CSDN问答
阅读更多...
​埃文科技受邀出席2024 “数据要素×”生态大会​

​埃文科技受邀出席2024 “数据要素×”生态大会​

2024“数据要素”生态大会&#xff08;以下简称“大会”&#xff09;于2024年6月30日在河南省郑州市举办&#xff0c;大会主题为“加快数据要素化进程 推动新质生产力发展”。 本次大会旨在搭建高水平交流合作平台、分享前沿观点、展示先进技术、交流实践经验&#xff0c;共同探…
阅读更多...
开放式蓝牙耳机推荐，开放式耳机选购小技巧大公开！

开放式蓝牙耳机推荐，开放式耳机选购小技巧大公开！

跑步是我们生活中最常见的运动方式。在跑步中佩戴耳机往往能达到“事半功倍”的效果&#xff0c;如何去选择一款好的运动耳机便需要精挑细选了。作为一个开放式耳机资深玩家兼马拉松参与者&#xff0c;我个人觉得开放式耳机是最适合跑步的了&#xff0c;其开放式的设计更加适合…
阅读更多...
数据结构之算法的时间复杂度

数据结构之算法的时间复杂度

1.时间复杂度的定义 在计算机科学中&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定量描述了算法的运行时间。一个算法所花费的时间与其中语句的执行次数成正比列&#xff0c;算法中的基本操作的执行次数&#xff0c;为算法的时间复杂度 例1&#xff1a; 计算Func1…
阅读更多...
鸿蒙‘ohpm‘ 不是内部或外部命令，也不是可运行的程序-解决方案

鸿蒙‘ohpm‘ 不是内部或外部命令，也不是可运行的程序-解决方案

&#x1f525; 博客主页&#xff1a; 小韩本韩&#xff01; ❤️ 感谢大家点赞&#x1f44d;收藏⭐评论✍️ 在鸿蒙的DevEco Studio的终端下输入 onpm -v 或者 你需要下载第三方ohpm包的时候提示‘ohpm‘ 不是内部或外部命令&#xff0c;也不是可运行的程序- 主要是因为我们…
阅读更多...
【基于R语言群体遗传学】-6-表型计算等位基因频率、最大似然估计方法

【基于R语言群体遗传学】-6-表型计算等位基因频率、最大似然估计方法

到目前为止&#xff0c;我们主要讨论了等位基因和基因型频率&#xff0c;以及我们如何可以从一个推断出另一个。但是&#xff0c;如果我们不知道等位基因频率&#xff0c;只知道种群中存在哪些表型呢&#xff1f;如果我们足够幸运&#xff0c;知道哪些表型对应哪些基因型&#…
阅读更多...
网络-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…
阅读更多...
扁鹊三兄弟的启示，探寻系统稳定的秘诀

扁鹊三兄弟的启示，探寻系统稳定的秘诀

一、稳定性的重要性 1. 公司收益的角度 从公司收益的视角审视&#xff0c;系统不稳定可能会引发直接损失。例如&#xff0c;当系统突然出现故障导致交易中断时&#xff0c;可能造成交易款项的紊乱、资金的滞留或损失&#xff0c;这不但会阻碍当前交易的顺利完成&#xff0c;还…
阅读更多...
web安全的会议室管理系统-计算机毕业设计源码50331

web安全的会议室管理系统-计算机毕业设计源码50331

目 录 摘要 1 绪论 1.1 开发背景与意义 1.2国内外研究现状 1.3 相关技术、工具简介 1.3.1 MySQL数据库的介绍 1.3.2 B/S架构的介绍 1.3.3 Java语言 1.3.4 SpringBoot框架 1.4论文结构与章节安排 2 会议室管理系统需求分析 2.1 可行性分析 2.1.1 技术可行性分析 2…
阅读更多...
【Redis】真行，原来是这样啊！ --Redis自动序列化和手动序列化的区别（存储结构、内存开销，实际写法）

【Redis】真行，原来是这样啊！ --Redis自动序列化和手动序列化的区别（存储结构、内存开销，实际写法）

对于Redis有两种序列化和反序列化的方式&#xff0c; 方式一&#xff1a; 一种是通过 注入RedisTemplate 对象&#xff0c;找个对象&#xff0c;通过配置类进行一定的配置&#xff0c;使得使用RedisTemplate 对象时&#xff0c;便会使用配置的那些键、值的序列化方式&#xff…
阅读更多...
深度学习Week19——学习残差网络和ResNet50V2算法

深度学习Week19——学习残差网络和ResNet50V2算法

文章目录 深度学习Week18——学习残差网络和ResNet50V2算法 一、前言 二、我的环境 三、论文解读 3.1 预激活设计 3.2 残差单元结构 四、模型复现 4.1 Residual Block 4.2 堆叠Residual Block 4.3. ResNet50V2架构复现 一、前言 &#x1f368; 本文为&#x1f517;365天深度学…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站