当前位置: 首页 > 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;有些触发器的时钟输入端与时钟脉冲源相连…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...