uni-app动态设置class

已于 2023-04-27 10:50:46 修改
阅读量2.9k 收藏
点赞数
文章标签： uni-app html 前端
于 2023-04-17 14:13:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73075579/article/details/130198956
版权

代码如下：

<template>
	<view class="body">
		<view class="body_box">
			<!--class操作-->
			<!--第一种方法-->
			<view class="border_title">标签class判断</view>
			<view class="eve_box">
				<view :class="index==0?'border_box green_box':'border_box yellow_box'"></view>
				<view :class="{'border_box':index==0,'green_box':index==1,'yellow_box':index==0}"></view>
			</view>
			<!--第二种方法-->
			<view class="border_title">方法class判断</view>
			<view class="eve_box">
				<view :class="[returnclass(0)]"></view>
				<view :class="[returnclass(1)]"></view>
			</view>
			<!--style操作-->
			<!--第一种方法-->
			<view class="border_title"
最低0.47元/天 解锁文章
栖柚与苏璃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app的使用体验总结
02-24
没用之前以为真和Vue一样...例如动态的Class与Style绑定，在H5能用，APP和小程序的体现就不一样。配置项跟着文档来，开发环境也是现成的，下载HBuilderX导入项目就能运行，日常开发习惯了VSCode，所以HBuilderX的主要作
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 ...注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uniapp 多状态下使用动态class
m0_66237295的博客
11-16 895
uniapp 动态class 多状态下用class
vue、uniapp中动态添加绑定style、class 9种方法实现
一步一个脚印，踏实努力，向着目标前进
08-31 8195
使用场景：当class和style属性是固定不变的时候，可以直接在模板中写死。优点：简单直接，没有额外的计算和逻辑。缺点：无法根据条件动态修改class和style。使用场景：当class和style属性需要根据组件的data或props属性动态变化时，可以使用v-bind来动态绑定。优点：可以根据条件动态修改class和style。缺点：需要在模板中写表达式，有一定的复杂度。使用场景：当class和style属性的计算逻辑比较复杂时，可以使用计算属性来生成class和style对象。
【uniapp / vue】中动态添加绑定style 或 class
最新发布
Brod-Roy的博客
04-15 1830
用于根据值不同需要修改的参数过多的时候。用于根据值不同需要修改的参数过多的时候。
uniapp点击切换，动态添加类名
m0_53398323的博客
12-26 812
【代码】uniapp点击切换，动态添加类名。
Uni-App - Class 与 Style 绑定
牧码的博客
02-19 8279
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果如下： class 支持的语法: &lt;view :class="{ active: isActive }"&gt;111&lt;/view&gt; &lt;view class="static" v-bind:class="{ active: isActi...
在uniApp中动态绑定class类名
qqpaowenquan的博客
10-23 7417
通过函数的方式添加： // html <span class="circularRing" :class="[borderColor({id:'01'})]"></span> // js borderColor(item) { let className = ''; switch (item.id) { case '01': className = 'bdcBlue'; break;
uni-app常用总结
qq_38722651的博客
01-10 1642
动态绑定class对象方法 1. 简单对象的绑定 :class="{'active':isActive}" active:class名(可以不加单引号) isActive:判断条件 2. 绑定并判断多个 1：使用逗号隔开 :class="{'active':isActive},'sort':isSort}" ​ 2：放入data里面 :class="className" data() { return { className:{ active: true, sort:false } } }
uni-app实现点赞评论功能
10-15
在uni-app中实现点赞评论功能是一项常见的需求，它涉及到用户交互和数据的动态更新。uni-app是一个使用Vue.js开发所有端的框架，可以方便地构建跨平台的应用。本篇文章将详细解析如何在uni-app中实现这个功能。 ...
uni-app从0到1.DOC uni-app实现代码
01-10
8. **Class与Style绑定**：演示如何动态改变元素的class和style属性，实现动态菜单激活等功能。 9. **事件处理、事件绑定、事件传参**：介绍uni-app中的事件系统，包括事件监听和事件传递。 10. **uni-app基础组件...
uniapp动态切换样式
qq_49552046的博客
09-11 2462
！！！！！！！！！！！！这是我写的自己以后看的 这个时候要求点击相应 的数字进行相应的样式变化，首先先写简单的写一下 <view class="asdfs" v-for="(item,index) in aaaa" @click="asfff(index)" :class="{'asdfsone':qwewr==index}">{{item}}</view> aaaa:["0","1","2","3"], qwewr:0, asfff(index){ this.qwew
Uniapp动态修改CSS（通过js修改CSS）
热门推荐
m0_37792384的博客
07-16 1万+
例如产品给了我们个需求需要点击一次按钮来使得view1的宽度增加10px 在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。 1.先搭建页面 嗯~我知道很丑，但就酱紫。Ծ‸Ծ 2.重点！！！改造代码，将vHeight放入的style标签中。 注意看改造后的style 嗯~改造完成，试一下效果。 确实生效了。 总结一下 js中动态修改css样式，需要先定义好要修改的变量，注意style的书写
uni-app点击给当前元素动态添加class
qq_40889256的博客
08-20 7654
uni-app点击给当前元素动态添加class <view class="recharge_num" :class="{'active':add_class==1}" @click="addClass(1)"> </view> <script> export default { data() { return { add_class:'', } }, methods: { // 动态添加class addC
uni-app学习笔记class和style的动态绑定
紫微斗数学习交流
12-16 503
//class的动态绑定 <template> <view> <view class="static" :class="{ active: isActive}">hello uni-app</view> </view> </template> <script> export default { data()
uni-app动态改变class（三元运算）
hannikan的博客
10-20 1415
<view :class="['color', 1 == 1 ? 'color_true' : 'color_false']">你好</view> .color { color: #000; } .color_true { color: #000; } .color_false { color: #000; }
Uni-app中Class绑定与Style绑定
weixin_33788244的博客
04-24 3101
为了节约性能,我们将Class与Style的表达式通过compiler硬编码到uni-app中 支持语法和转换效果如下: Class支持语法: 1 <view :class="{ active: isActive }">111</view> 2 <view class="static" v-bind:class="{ active: isActive, '...
vue自定义指令：提高开发效率的秘密武器
Shids_的博客
06-03 1010
vue自定义指令：提高开发效率的秘密武器
uni 动态添加style_uniApp——v-for 动态class、动态style
weixin_39608301的博客
12-23 758
:class="i.themColor"{{i.title}}{{i.txt}}import common from '../../common/common.js';export default {data() {return {htmlJSON:common.kdtHomeHtmlJSON}},methods: {},mounted() {}}// body.content{width: 75...
uni-app同时设置静态class与动态class
06-03
在uni-app中，可以同时设置静态class与动态class。静态class可以通过在标签上直接添加class属性来设置，而动态class可以通过在标签上使用v-bind:class指令来设置。例如： ```html <template> <div class="static-class" :class="dynamicClass"></div> </template> <script> export default { data() { return { dynamicClass: 'dynamic-class', }; }, }; </script> <style> .static-class { color: red; } .dynamic-class { font-size: 20px; } </style> ``` 在上面的例子中，div标签同时设置了静态class为"static-class"和动态class为"dynamic-class"，静态class设置了文字颜色为红色，动态class设置了字体大小为20px。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值