码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue里面如何动态添加class类名和style样式


    一、动态添加class

    举个列子如下,我需要用到的 class如下:

    1. <style>
    2. .red{color: skyblue;}
    3. .thin{font-weight: 200;}
    4. .italic{font-style: italic;}
    5. .active{letter-spacing: 0.5em}
    6. style>

    我想动态添加class, 而不是手动写在某个标签里面。 这时候需要用到v-modal动态变量来绑定,根据v-modal的值判断是否够存在,动态去添加class类名。

    1.第一种使用方式,直接传递一个数组,注意的 class需要使用 v-bind 做数据绑定,效果如下:

     

     主要code:

     <h1 v-if="flag" :class="['italic','red']">H1标签!!!h1>

    全部code:

    1. <template>
    2. <div>
    3. <h1 v-if="flag" :class&#
  • 相关阅读:
    Python Packaging & Distribution
    基于matlab实现的电力系统稳定性分析摆幅曲线代码
    Java定时任务实现优惠码
    在Ubuntu上配置CUDA基础环境
    Spring Boot 2 基础篇学习笔记
    vue3 echarts实现k线
    hive-学习微博日志分析
    Json“牵手”唯品会商品详情数据方法,唯品会商品详情API接口,唯品会API申请指南
    各大主流数据库区别 新出炉
    brew install libomp失败解决方法
  • 原文地址:https://blog.csdn.net/qq_41646249/article/details/127612237
  • 最新文章
  • 基于多模态视觉模型和图文向量模型的工业图像知识库研究与应用
    .NET 8 Web开发入门(四):注入燃料——Entity Framework Core 与 Code First 实战
    当 AI 开始写代码,谁来保证它不会翻车?
    深入剖析Java内存模型与volatile关键字
    使用Cursor实现管理系统的主界面布局的Vue3前端开发
    Oracle Deep Data Security (Deep Sec) 初体验
    Calico BGP Route Reflectors 路由反射器使用方式
    NuGet下载量数据分析与.NET生态全景观察:从数据洞察技术演进
    PyTorch KernelAgent 源码解读 ---(2)--- 总体流程
    企业级嵌入模型微调实战,基于RTX 4000算力
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号