动态添加类名Class

青青子衿越

已于 2024-04-19 09:58:40 修改

阅读量122

点赞数

文章标签：前端

于 2023-09-26 10:26:50 首次发布

本文链接：https://blog.csdn.net/qq_46376192/article/details/133298823

版权

1，微信小程序

 <view class="lastTime {{learinfrom.IsLike == 0 ? 'selected' : ''}}"  style="font-size: 24rpx;color:#808080;"
>点赞（大拇指）</view>

2，h5

<view  :class="goodsListType == 'all'?'typeAct':''"  @click='getAll'>全部</view>

优惠劵

青青子衿越

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态添加类名Class

动态添加类名
复制链接

扫一扫

微信小程序 动态添加类名

仲广绪的博客

05-09

3715

微信小程序 动态添加类名和vue的语法差不多，一个小测试 <view class="list-top"> <view data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick">头条</view> <view data-num="2" class="list-menu list-menu2 {{_num==2?'active':''}}" bindta

小程序实现动态选择类名

weixin_38694789的博客

07-24

586

在做项目的时候在同一个点击时间，但要控制两个不同的类名，这就要用到动态选择类名，实现情况如下： <viewclass="tabbox"wx:if="{{tabs[0].isActive?'gobox':'gobox2'}}"></view> 通过tab[0]isActive 控制显示的gobox样式和gobox2样式 ...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序动态绑定class样式类

海贼王某人的博客

03-23

6442

话不多说，直接上代码，循环列表，根据选中状态显示不同的样式，active就是你在wxss文件里面创建的类名 <view class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}"> {{item.name}} </view> ......

vue动态添加类名

weixin_39936058的博客

02-20

3587

<template> <div> <h2>动态添加类名</h2>   <!-- 对象的形式: 用花括号包裹起来，类名用引号， --&gt

微信小程序动态添加类名，切换class类名

weixin_41733299的博客

02-23

5329

微信小程序切换导航栏，因为微信小程序不能与jQuery一样用dom属性，例如addclass，removeclass这样的方法，就相对来说麻烦一点，可是有时候需要做切换导航栏这样的操作，参考代码如下： wxml： <view class="header-sort-nav"> <view bindtap="tapHan" class='sort-li {{_index==1?"nav-checked":""}}' data-index="1">招生通告</view&gt

vue中动态添加class类名的方法

10-18

今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解用JS添加和删除class类名

10-17

主要介绍了用JS添加和删除class类名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

基于JavaScript实现类名的添加与移除

01-21

//用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)'+name+'(\\s+|$)'); } //hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document....

微信小程序中如何动态添加 class 属性

wbskb的博客

08-20

5091

如何在微信小程序动态添加 class 属性，如何在微信小程序组件中动态添加 class 属性

uniapp实现分类列表左右联动

Debug的博客

01-23

1440

【代码】实现分类列表左右联动。

微信小程序如何像vue一样在动态绑定类名

08-27

主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别，需要的朋友可以参考下

微信小程序框架wepy之动态控制类名

12-29

本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法，供大家参考，具体内容如下控制类名 style <style lang=less scoped> .liBkgCor { background-color: red; } </style> template <view class=t_tab> <li tap.stop=changeLi({{1}}) class={{ xss=removed>推荐</li> <li @tap.stop=changeLi({{2}}) class={{ l

微信小程序 实现动态显示和隐藏某个控件

08-30

主要介绍了微信小程序 实现动态显示和隐藏某个控件的相关资料,需要的朋友可以参考下

微信小程序动态切换class类名

最新发布

因为健忘，所以记点有的没的〒▽〒

05-06

810

点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。

uni框架下的前端小知识

weixin_53908842的博客

04-30

328

1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。

vue动态添加class类名

08-17

在Vue中动态添加class类名可以通过以下方式实现： 1. 使用对象语法：你可以使用一个对象来指定需要添加的class类名，对象的key为类名，value为一个布尔值，如果该值为真，则添加对应的类名，如果为假，则不添加对应的类名。 ```html <template> <div :class="{ 'active': isActive, 'highlight': isHighlighted }"></div> </template> <script> export default { data() { return { isActive: true, isHighlighted: false }; } }; </script> <style> .active { color: red; } .highlight { background-color: yellow; } </style> ``` 在上面的例子中，当isActive为true时，div元素会添加active类名，从而应用red颜色样式；当isHighlighted为false时，div元素不会添加highlight类名，从而不应用yellow背景色样式。 2. 使用数组语法：你可以使用一个数组来指定需要添加的class类名，数组中的每个元素都可以是一个字符串或一个动态绑定的数据。 ```html <template> <div :class="[activeClass, errorClass]"></div> </template> <script> export default { data() { return { activeClass: 'active', errorClass: 'error' }; } }; </script> <style> .active { color: red; } .error { border: 1px solid red; } </style> ``` 在上面的例子中，div元素会同时添加active和error类名，从而应用red颜色样式和红色边框样式。 3. 使用计算属性：你可以利用计算属性来动态计算需要添加的class类名。 ```html <template> <div :class="computedClass"></div> </template> <script> export default { data() { return { isActive: true, isHighlighted: false }; }, computed: { computedClass() { return { 'active': this.isActive, 'highlight': this.isHighlighted }; } } }; </script> <style> .active { color: red; } .highlight { background-color: yellow; } </style> ``` 在上面的例子中，计算属性computedClass会根据isActive和isHighlighted的值动态返回一个对象，然后该对象会被应用到div元素的class属性上。以上是在Vue中动态添加class类名的几种常见方式，你可以根据具体场景选择合适的方式来实现。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交