Vue动态类名的实现

2024-06-03 23:40:15

写了一年半小程序的我，近两天接手了一个H5的小项目，出于对vue的向往（啊，呸），决定捡一下vue的具体使用，那可真真是坑死我了。标签不一样、命令不一样、绑定数据不一样……总之用惯了小程序的语法，vue的啥啥都别扭，好嘞闲话不多说，今天我们来看一下vue的动态类名的绑定，记录一下方便日后查看。
Tips：vue设置动态属性是要用命令v-modal的哦，为了方便直接用半角冒号也可以啦，所以动态类名是主要这样写的“:class”。

无其他固定类名，只绑定动态类名

单个动态类名

<span :class="[2< 4 ? 'redColor' : '']">单次机油加注量：</span>

我给出的例子基本上都是三元运算符的，上面这个就是满足条件的就加上redColor这个类名。
特点：加单个动态类名要用“[]”这个括号包起来，类名也要用冒号包起来。

多个动态类名

<span :class="[item.IsShow==1?'':'itemBtnDis', item.IsSelect == 1?'itemBtnActive':'']" :index="index" :show="item.IsShow" v-for="(item,index) in getChoiceData.BrandList"></span>

上面这个是多个动态类名的，并且在循环中，根据循环数据满足或不满足某个条件的时候加上一个类名。
特点：跟单个冬天类名一样，类名与类名之前用都好隔开。

有其他固定类名，并添加动态类名

<span class="itemBtn" :class="[item.IsShow==1?'':'itemBtnDis', item.IsSelect == 1?'itemBtnActive':'']" :index="index" :show="item.IsShow" v-for="(item,index) in getChoiceData.BrandList"></span>

特点：有固定类名的，就还像之前那样写一个class赋上固定的类名，然后有动态类名的还想之前那样写在后面就可以了，但是要注意的是动态类名:class只能写一个哦，它属于标签的属性是不能重复的。

嗯，动态类名的写法大概就是这样，希望自己能记住，更希望能帮助到有需要的小伙伴们。

Vue动态类名的实现相关推荐

vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
[vue] 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
Vue 动态数据滚动
使用Vue动态滚动(上下滚动)显示将要展示的讯息. 代码分析: 1.设置固定样式的框架内容 2.设置红色字体内容是动态变化的 3.滚动效果为向上滚动效果演示: 此效果图的数据是不停滚动变化的第二张 ...

最新文章

热门文章