首页 > 其他分享 >vue 动态的class

vue 动态的class

时间:2023-10-21 19:32:11浏览次数:23  
标签:语法 vue a1 a2 test 动态 class

1. 对象语法:

适合较多的class名或动态的class

:class="{'test-class': test}"      // 当test为true时,有test-class值

2. 数组语法:

适合较少的class名

:class="[a1, a2]"                  // 表示有两个类名:a1、a2

标签:语法,vue,a1,a2,test,动态,class
From: https://blog.51cto.com/u_16273048/7969414

相关文章

  • Vue验证码模块
    一个普通图形验证码的模块,使用方式如下: 导入模块importrandomfrom'@/util/VerificationCode'使用方式this.randomObj=random({id:'random',api:{url:'/api/getCode',headers:{'Content-Type':'applica......
  • 手撕Vue-实现事件相关指令
    经过上一篇文章的学习,实现了界面驱动数据更新,接下来实现一下其它相关的指令,比如事件相关的指令,v-on这个指令的使用频率还是很高的,所以我们先来实现这个指令。v-on的作用是什么,是不是可以给某一个元素绑定一个事件。紧接着了解了v-on的作用之后,我在example.html的结构代码......
  • uniCloud cms 自媒体资讯新闻文章应用系统 uniapp+uniCloud+AntDesignVue Life cms
    介绍LifeCMS是uniCloud+uni-app云端一体全套CMS/自媒体/资讯/新闻/文章应用系统,前台包含注册、登录(账号密码登录、短信登录、微信手机号快捷登录、微信一键登录、App手机一键登录、Apple登录)、文章列表、文章详情、搜索、广告、分享、评论、回复、点赞、收藏、用户中心、意见......
  • Vue进阶(幺玖玖):vue 输入框中按enter键实现搜索或表单提交
    在前端项目开发过程中,为优化用户体验,可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下:el-input监听键盘按下状态得用@keyup.enter.native,如果是非el-input组件,可以直接用@keyup.enter。<[email protected]="search"v-model='form.searchAttr'></el......
  • vue实现点击复制功能(无需安装库)
     1.标签<buttonv-copy="text">复制文本</button>text是要复制的内容,在data函数中 2.在main.js中注册copy指令Vue.directive('copy',{bind:function(el,binding){el.$copy=function(){consttextarea=document.createElement('text......
  • VUE
    在body标签中编写视图       ......
  • [Vue]键盘事件
    1.Vue中常用的按键别名:   回车=>enter   删除=>delete(捕获“删除”和“退格”键)   退出=>esc   空格=>space   换行=>tab(特殊,必须配合keydown使用)   上=>up   下=>down   左=>left  右=>right2.Vue未提供别名的按键,可以使用按键原始的key值去......
  • 动态加载目录进classpath
    参考文档:https://www.codelast.com/%E5%8E%9F%E5%88%9B-java%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E7%9B%AE%E5%BD%95%E5%88%B0classpath%E4%B8%AD/ publicstaticloadFoldertoClasspath(){FileprogramRootDir=newFile("./");URL......
  • Python打印动态进度条
    importtimedefmyprocess(percent):ifpercent>1:percent=1#打印对应的#号数量*"#"=>字符串#号效果strvar=int(percent*50)*"#"#\r将后面字符覆盖到行首进行打印%%=>%print("\r[%-50s]%d%%"%(s......
  • 基于Vue.js和Spring Boot的口罩自助售卖系统:设计、实现与技术深度解析
    本文介绍了一种基于Vue.js和SpringBoot的口罩自助售卖系统的设计与实现。该系统通过前端Vue.js框架和后端SpringBoot框架的结合,实现了用户注册登录、口罩浏览购买、订单管理等功能。通过详细的代码示例和技术深度的解析,读者能够全面了解系统的设计思路和实现方法。1.引言随着全......