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 ; //这个值不在模板层渲染,可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.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 ; //这个值不在模板层渲染,可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.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 ; //这个值不在模板层渲染,可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.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 ; //这个值不在模板层渲染,可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.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.valuei ++ ; 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>
效果如下:

相关文章:
class类和style内联样式的绑定
这里的绑定其实就是v-bind的绑定,如代码所示,div后面的引号就是v-bind绑定,然后大括号将整个对象括起来,对象内先是属性,属性后接的是变量,这个变量是定义在script中的,后通过这个变量ÿ…...
3033.力扣每日一题7/5 Java
博客主页:音符犹如代码系列专栏:算法练习关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先创建一个与…...
GPT-5:下一代AI如何彻底改变我们的未来
GPT-5 发布前瞻:技术突破与未来展望 随着科技的飞速发展,人工智能领域不断迎来新的突破。根据最新消息,OpenAI 的首席技术官米拉穆拉蒂在一次采访中确认,GPT-5 将在一年半后发布,并描述了其从 GPT-4 到 GPT-5 的飞跃如…...
重载一元运算符
自增运算符 #include<iostream> using namespace std; class CGirl { public:string name;int ranking;CGirl() { name "zhongge"; ranking 5; }void show() const{ cout << "name : "<<name << " , ranking : " <…...
10元 DIY 一个柔性灯丝氛围灯
之前TikTok上特别火的线性氛围灯Augelight刚出来的时候一度卖到80多美金,国内1688也能到400多人民币。 随着各路国内厂商和DIY创客的跟进,功能变多的同时价格一路下滑,虽然有的质感的确感人,但是便宜啊。 甚至关注的up有把成本搞到…...
表单自定义组件 - 可选择卡片SelectCard
import React from react; import styles from ./index.module.less;type OptionsType {/*** 每个item渲染一行,第0项为标题*/labels?: any[];/*** 自定义渲染内容*/label?: string | React.ReactNode;value: any; }; interface IProps {value?: any;onChange?…...
Ubuntu / Debian安装FTP服务
本章教程,记录在Ubuntu中安装FTP服务的具体步骤。FTP默认端口:21 1、安装 pure-ftpd sudo apt-get install pure-ftpd2、修改默认配置 # 与 centos 不同,这里需要在 /etc/pure-ftpd/conf 文件夹下执行下列命令,增加对应配置文件: # 创建 /etc/pure-ftpd/conf/PureDB 文件…...
若依 Vue 前端分离 3.8.8 版中生成的前端代码中关于下拉框只有下拉箭头的问题
生成代码修改前 <el-form-item label"课程学科" prop"subject"><el-select v-model"queryParams.subject" placeholder"请选择课程学科" clearable><el-optionv-for"dict in course_subject":key"dict…...
C++把一个类封装成动态链接库
一、步骤 1. 创建类头文件 首先,定义你要封装的类。例如,创建一个名为MyClass的类: // MyClass.h #pragma once#ifdef MYCLASS_EXPORTS #define MYCLASS_API __declspec(dllexport) #else #define MYCLASS_API __declspec(dllimport) #end…...
每天一个项目管理概念之项目章程
项目管理中,项目章程扮演着至关重要的角色。它是项目正式启动的标志,为项目的执行提供法律和组织上的认可。项目章程是项目管理知识体系(PMBOK)中定义的关键文档之一,对于确保项目的顺利进行具有决定性的影响。 定义与…...
c++11新特性-4-返回类型后置
文章目录 返回类型后置1.基本语法 返回类型后置 1.基本语法 auto func(参数1,参数2,参数3,...)->decltype(参数表达式) {...... }例如: template<typename T,typename U> auto add(T t,U u)->decltype(t u) {retu…...
Linux-C语言实现一个进度条小项目
如何在linux中用C语言写一个项目来实现进度条?(如下图所示) 我们知道\r是回车,\n是换行(且会刷新) 我们可以用 \r 将光标移回行首,重新打印一样格式的内容,覆盖旧的内容,…...
vue使用glide.js实现轮播图(可直接复制使用)
效果图 可以实现自动轮播,3种切换方式:直接滑动图片、点击两侧按钮、点击底部按钮 体验链接:http://website.livequeen.top 实现 一、引入依赖 1、控制台引入依赖 npm install glidejs/glide 2、在css中引用 <style scoped> import glidejs/g…...
TK养号工具开发会用上的源代码科普!
在当今数字化时代,社交媒体平台的崛起使得网络账号的维护与管理变得日益重要,其中,TK作为一款备受欢迎的社交媒体平台,吸引了大量用户。 在TK上进行账号养护,即通过各种方式提升账号权重、增加曝光量,已成…...
信创-办公软件应用工程师认证
随着国家对信息技术自主创新的战略重视程度不断提升,信创产业迎来前所未有的发展机遇。未来几年内,信创产业将呈现市场规模扩大、技术创新加速、产业链完善和国产化替代加速的趋势。信创人才培养对于推动产业发展具有重要意义。应加强高校教育、建立人才…...
数组操作forEach和map
forEach和map的相同点 1、都是循环遍历数组中的每一项 2、入参匿名函数都支持三个参数,当前项item,当前项索引index,原始数组arr;匿名函数中的this都指向window 3、都可以通过return跳过本次循环 4、都无法通过使用 break 语句来中…...
流式处理应用场景与流式计算处理框架选择建议
文章目录 前言使用场景如何选择流式处理框架 前言 在之前的文章中我们介绍了如何进行流式处理——从一般性的概念和模式说起,并列举了一些Streams的例子: 流式处理相关概念总结说明流式处理设计模式总结说明Kafka Streams 架构概览 接下来的文章将介绍…...
2024年软件测试岗必问的100+个面试题【含答案】
一、基础理论 1、开场介绍 介绍要领:个人基本信息、工作经历、之前所做过的工作及个人专长或者技能优势。扬长避短,一定要口语化,语速适中。沟通好的就多说几句,沟通不好的话就尽量少说两句。举例如下: 面试官你好&…...
A4-C四驱高防轮式巡检机器人
在当今数字化和智能化迅速发展的时代,旗晟智能带来了一款革命性的创新产品——A4-C四驱高防轮式巡检机器人。这款机器人以其卓越的性能和多功能性,为工业巡检领域带来了全新的解决方案。 一、产品亮点 1、四驱动力与高防护设计 四驱高防轮式巡检机器人…...
Https网站如何申请免费的SSL证书及操作使用指南
前言 在当今互联网环境下,HTTPS已成为网站安全的标配,它通过SSL/TLS协议为网站数据传输提供加密,保障用户信息的安全。申请并部署免费SSL证书,不仅能够提升网站的专业形象,还能增强用户信任。本文将详细介绍如何在知名…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
