当前位置: 首页 > news >正文

探索vue框架的世界: 内部、外部样式和内联样式动态绑定的方法

在实际项目中,经常会遇到这样的场景,可以通过逻辑层中设定的变量,在视图层中来呈现不同的样式,那么这种动态绑定样式的方式如何实现呢?
本篇文章,博主将和大家分享动态绑定内联样式style 和 动态绑定内部和外部样式class 的几种常用的方法。 希望走过路过的客观多多指教,并使用您发财的小手留下您宝贵的肯定👍👍👍🤞。

注意:测试以vue2.0的选项式写法为例,首先,在逻辑层的data中预置变量

 export default{name:'',data(){return{activeId:1,activeAvatarName:'dongdong',classObj:{active:true,disabled:false},isActive:true,isRefresh:true,activeColor:'red',width:16,activeStyles:{color:'red',fontSize:'14px'},otherStyles:{},	boxColor:'red'}},computed:{classObj:function(){return {active:this.isActive,refresh:this.isRefresh}}}}

一、动态绑定内联样式 style

👉1.1、对象方式绑定

  • 方式1 :对象中使用变量赋值

    <div :style="{color:activeColor,width:width+'px'}"></div>
    
  • 方式2:对象中使用三目运算符

    <div :style="{color:(index==16?activeColor:'#000')}"></div>
    

👉1.2、数组方式绑定

  • 方式1:数组中实现全部的动态绑定

    <div :style="[activeStyles,otherStyles]"></div>
    
  • 方式2:数组中可以实现部分动态绑定,部分静态赋值

    <div :style="[{color:(index==16?activeColor:'#000')},{fintSize:'18px'}]"></div>
    

👉1.3、三目运算符方式绑定

  • 方式1:三目运算可以写在括号中,也可以删除括号
    <div :style="{color:(index==1?boxColor:'#000')}"></div><div :style="{color:index==1?boxColor:'#000'}"></div>
    
  • 方式2:数组中使用三目运算,需要写在对象中
    <div :style="[{color:(index==1?boxColor:'#000')},{pointer-events:'none'}]"></div>
    
  • 方式3:也可以字符串的方式书写三目运算
    <div :style="item.avatarName===activeAvatarName?'font-weight:700':'font-weight:400'"></div>
    

二、动态绑定内外部样式 class

2.1、对象方式绑定

  • 类的名称一般都是用字符串,比如active , 以下表达式判断元素是否绑定一个名叫active的类

    <div :class="{'active':isActive}"></div>
    <div :class="{'active':boxColor=='red'">{{name}}</div>
    <div :class="{'active':activeId==item.uid}"{{item.userName}}</div>
    
  • 可判断并绑定多个类,用逗号隔开

    <div :class="{'active':isActive,'refresh':isRefreshr}"></div>
    
  • 可放在data里,造一个对象出来

    <div :class="classObj">{{name}}</div>
    
  • 使用computed属性 根据data里的值变化

    <div :class="classObject">{{name}}</div>
    

2.2、数组方式绑定

  • 使用单纯的数组

    <div :class="[isActive,isRefresh]">{{userName}}</div>
    
  • 数组与三目运算符相结合,注意,动态绑定的style,三目运算只能写在对象中,而数组方式动态绑定的class,可以在数组中使用三目运算

    :class="[isActive?'active':'']"
    
  • 元素需要的类名一定要加" " 双引号,如果这个类名写在对象中可以不加

    :class="[{active:isActive},'disabled']" 
    

相关文章:

探索vue框架的世界: 内部、外部样式和内联样式动态绑定的方法

在实际项目中&#xff0c;经常会遇到这样的场景&#xff0c;可以通过逻辑层中设定的变量&#xff0c;在视图层中来呈现不同的样式&#xff0c;那么这种动态绑定样式的方式如何实现呢&#xff1f; 本篇文章&#xff0c;博主将和大家分享动态绑定内联样式style 和 动态绑定内部和…...

代码随想录算法训练营第三十八天|动态规划|理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

理论基础 文章 说实话&#xff0c;没做过题连理论基础都看不懂 1 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 2 确定递推公式 3 dp数组如何初始化 4 确定遍历顺序 5 举例推导dp数组 这道题目我举例推导状态转移公式了么&#xff1f; 我打印dp数组的日志了么&…...

运维知识点-JBoss

JBoss 介绍介绍 JBoss是一个基于J2EE的开放源代码的应用服务器,也是一个运行EJB(Enterprise JavaBean)的容器和服务器。它支持EJB 1.1、EJB 2.0和EJB3的规范,体现了J2EE规范中最新的技术。JBoss遵循LGPL许可,可以在任何商业应用中免费使用,并且由开源社区开发,这使得JB…...

HarmonyOS—配置编译构建信息

在进行应用/服务的编译构建前&#xff0c;需要对工程和编译构建的Module进行设置。API Version 9、API Version 8与API Version 4~7的构建体系不同&#xff0c;因此在设置编译构建信息时也存在差异&#xff1a; API Version 9&#xff1a;需要对构建配置文件、构建脚本、应用依…...

Chrome浏览器好用的几个扩展程序

Chrome好用的扩展程序 背景目的介绍JsonHandle例子未完待续。。。。。。 背景 偶然在往上看到Chrome有很多好用的扩展程序&#xff0c;比较好用&#xff0c;因此记录下比较实用的扩展程序。 目的 记录Chrome浏览器好用的插件。 介绍 JsonHandle下载以及无法扩展插件的解决…...

Enzo Life Sciences Cortisol(皮质醇) ELISA kit

皮质醇又称为氢化可的松&#xff0c;是一种由胆固醇合成的类固醇激素。它是肾上腺皮质产生和分泌的主要糖皮质激素。皮质醇在血液中以游离皮质醇的形式存在&#xff0c;或与皮质类固醇结合球蛋白(CBG)结合。皮质醇水平在早上7点左右最高&#xff0c;晚上最低。皮质醇可以调节新…...

面试经典150题 -- 二分查找 (总结)

总的链接 : 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 二分算法模板 : 详见 : 基础二分学习笔记-CSDN博客 35 . 搜索插入位置 链接 : . - 力扣&#xff08;LeetCode&#xff09; 思路 : 用二分查找第一个>t…...

蓝牙耳机怎么选择比较好?2024年热门机型推荐大揭秘!

​蓝牙耳机已经成为了我们日常生活中不可或缺的一部分&#xff0c;随着技术的发展&#xff0c;人们对蓝牙耳机的要求也在不断提升&#xff0c;不仅希望音质出色&#xff0c;还希望能够在不同的场景下使用。然而&#xff0c;如何挑选一款适合自己的蓝牙耳机却是一门学问。今天&a…...

强制Unity崩溃的两个方法

在Unity中&#xff0c;这两种方法都可以用于强制使应用程序崩溃&#xff0c;但它们的作用略有不同&#xff1a; Application.ForceCrash(0); 这个方法会强制应用程序崩溃&#xff0c;并且参数传入的是一个整数值。当参数为0时&#xff0c;它会导致应用程序崩溃并显示一个“Acce…...

中间件 | Redis - [big-key hot-key]

INDEX 1 big-keyhot-key 1 big-key 分类 字符串型 big-key&#xff1a;字符串最大可以到 512M集合型 big-key&#xff1a;集合个数可以到 2^23 问题 内存空间不均匀指令耗时增加&#xff1a;redis 是单线程的&#xff0c;部分操作的时间复杂度是 O(n) 的&#xff0c;big-ke…...

STM32基础--自己构建库函数

什么是 STM32 函数库 固件库是指“STM32 标准函数库”&#xff0c;它是由 ST 公司针对 STM32 提供的函数接口&#xff0c;即API (Application Program Interface)&#xff0c;开发者可调用这些函数接口来配置 STM32 的寄存器&#xff0c;使开发人员得以脱离最底层的寄存器操作…...

网站被插入虚假恶意链接怎么办?

在当前的电信和网络环境中&#xff0c;诈骗案件频发&#xff0c;许多受害者不幸上当&#xff0c;主要原因是他们点击了诈骗者发送的假链接。这些诈骗网站经常模仿真实网站的外观&#xff0c;使人难以分辨真伪。那么&#xff0c;我们应如何鉴别这些诈骗链接呢&#xff1f; 下面…...

ThreeJs限制模型拖动的范围

之前有讲过ThreeJs中对模型的拖动功能&#xff0c;使用DragControl组件&#xff0c;将模型放到组件的集合中&#xff0c;就可以拖动点击的模型了&#xff0c;这节细化下怎么控制拖动&#xff0c;比如之拖动z轴&#xff0c;或者限制拖动x轴的范围在某个区间&#xff1a; 首先还是…...

关于JVM的小总结(待补充)

JVM组成及他们之间的关系 装载类子系统字节码执行引擎运行时数据区 装载类子系统 类加载器字节码调节器类加载运行时数据区 字节码执行引擎 运行时数据区 线程私有 虚拟机栈本地方法栈程序计数器 线程共享 堆方法区&#xff08;元空间&#xff09;...

day37 贪心算法part6

738. 单调递增的数字 中等 提示 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 不知道怎么讲思路……以9287举例&#xff0c;…...

38女神节:剧情热梗小游戏新品!预售1折秒杀,手慢无

抖音热剧情热梗小游戏《逆袭大冒险》登录 Cocos Store 预售开启&#xff01;游戏包含 20剧情 40 关卡&#xff0c;先来看下视频吧&#xff01; 游戏内嵌多种小游戏玩法&#xff0c;是不是很有亲切感呢&#xff1f;抽针、流体、重力 3.8女神节特价预售 欢迎加入迷萌游戏《逆袭大…...

岩土工程监测仪器振弦采集仪的发展历程与国内外研究现状

岩土工程监测仪器振弦采集仪的发展历程与国内外研究现状 岩土工程监测仪器河北稳控科技振弦采集仪是用于测量土体或岩石地层的力学性质、地层结构、地下水位等参数的一种仪器设备。它通过振动在地下传播的声波信号的传播速度和特性&#xff0c;来推断地层的物理性质。以下是对…...

Git 掌握

目录 一、前言 二、centos安装Git 三、Git基本操作 (1) 创建Git本地仓库 (2) 配置Git (3) 认识工作区&#xff0c;暂存区&#xff0c;版本库 四、添加文件 五、查看.git文件 六、修改文件 七、版本回退 八、撤销修改 (1) 场景一 对于还没有add的代码 (2) 场景二 已…...

面试题之——事务失效的八大情况

事务失效的八大情况 一、非public修饰的方法 Transactional注解只能在在public修饰的方法下使用。 /*** 私有方法上的注解&#xff0c;不生效&#xff08;因私有方法Spring扫描不到该方法&#xff0c;所以无法生成代理&#xff09;*/ Transactional private boolean test() …...

一些硬件知识(六)

防反接设计&#xff1a; 同步电路和异步电路的区别: 同步电路:存储电路中所有触发器的时钟输入端都接同一个时钟脉冲源&#xff0c;因而所有触发器的状态的变化都与所加的时钟脉冲信号同步。 异步电路:电路没有统一的时钟&#xff0c;有些触发器的时钟输入端与时钟脉冲源相连…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...