十五. Vue通过:class动态控制样式:class用法

这不比博人传燃？

已于 2022-03-24 16:46:02 修改

阅读量1.1k

点赞数 1

分类专栏： vue2 文章标签： vue

于 2022-03-23 23:39:11 首次发布

原文链接：https://blog.csdn.net/u012345683/article/details/105146767

版权

vue2 专栏收录该内容

33 篇文章 9 订阅

订阅专栏

https://blog.csdn.net/u012345683/article/details/105146767

举例

尚硅谷尚品汇20集

个人理解总结

<div
  class="item"
  v-for="(c1, index) in categoryList"
  :key="c1.categoryId"
  :class="{cur:currentIndex==index}"
>

若:class="{cur:currentIndex==index}"中的中括号中cur样式若为false，则样式无效；若为true，则样式有效！
感觉这只是通过:class间接的动态控制样式，真正的动态控制样式是:style（如第16篇文章）

===========
我说的并不全面：https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这不比博人传燃？

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
十五. Vue通过:class动态控制样式:class用法

https://blog.csdn.net/u012345683/article/details/105146767
复制链接

扫一扫

专栏目录

Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制

qq_31455841的博客

12-15

410

Vue 入门 1. 样式控制 1. style和class的控制 1. class的三种控制方式 # 样式 <body> <div id="box"> <h1>class的三种写法</h1> <div :class="isActive?'red':'green'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="class

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

10-18

总结来说，Vue提供了多种灵活的方式来动态添加class类名，这使得我们可以根据应用程序的需求轻松地控制元素的样式。在实际开发中，可以根据具体情况选择最适合的方法，提高代码的可读性和可维护性。

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

动态控制class(样式)

hbvh1的博客

11-05

214

<div class="progress assigntasks" :class="[ this.percentage > 50 ? 'isActive' : '' ]"> </div> .isActive{ box-shadow: 1px 2px 3px #000000; }

vue中v-bind控制class和style

最新发布

m0_72168336的博客

06-13

1013

当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。

vue 动态控制class

青春不打烊的博客

04-10

2193

<el-input :class="{'myClassbHouseNameA':cellNameList.houseState=='01','myClassbHouseNameC':cellNameList.houseState=='02','myClassbHouseNameR':cellNameList.houseState=='03','myClassbHouseNameT':c...

vue关于class和样式的使用

weixin_30457465的博客

03-13

这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强...

vue中动态控制class

qq_41445106的博客

05-12

1944

1.直接绑定对象（一） <div id="app"> <p class="static" :class="{red: isRed, blue:isBlue}">昨天再好也回不去，明天再难也要抬脚继续～</p> </div> <script> var watchExampleVM = new Vue({ el: '#app', data: { isRed: true,

vue 动态添加class,三个以上的条件做判断方式

01-22

如果 status为1，样式为redRoom 如果 status为2，样式为greenRoom1 ...补充知识：vue 根据变量值来判断显示class 我就废话不多说了，大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’

快速解决vue动态绑定多个class的官方实例语法无效的问题

10-18

在使用Vue.js框架进行Web开发时，动态绑定DOM元素的class属性是一项基础且实用的技术。开发者可以通过class绑定来根据不同的条件为元素动态添加或移除样式类，从而实现丰富的交互效果。不过，在实际开发过程中，...

vue通过style或者class改变样式的实例代码

10-17

在Vue.js框架中，改变元素样式的操作是前端开发中常见的需求，Vue为此提供了灵活的方式来通过绑定class或style来控制元素的样式。本知识点将详细介绍如何在Vue中使用class或style来动态改变元素的样式，并通过实例...

在vue中使用v-bind:class的选项卡方法

10-17

在Vue.js框架中，`v-bind:class`指令用于动态地绑定一个或多个CSS类到元素。这个特性使得我们可以根据组件的数据状态来切换元素的样式，从而实现动态UI效果。在本例中，我们将学习如何使用`v-bind:class`实现一个...

VUE class style 样式控制

qq_26239917的博客

05-22

496

class .a{ border:2px solid red; } .b{ background: darkmagenta; } data:{ title:"class && style 动态绑定 ", flagA:true, cla...

vue 动态绑定class样式

zmy967131的博客

11-28

355

vue 动态绑定class样式

Vuejs005---使用 class 样式

rngigskt的博客

08-24

408

使用 class 样式使用 vuejs 控制样式，会使样式变化的操作更加的灵活（1）class 样式的使用案例 1：传递一个 class 样式的数组，通过 v-bind 做样式的绑定该形式与之前的形式没有太大的区别 :class="[样式 1,样式 2]" 案例 2：通过三目（元）运算符操作以上数组 boolean?true 执行 :false 执行案例 3：使用对象（json）来表达以上三目（元）运算符的操作 {样式:flag} 案例 4：

Vue-class样式动态控制

weixin_49352307的博客

05-19

225

1.对象—>键就是类名，值就是布尔值。如果值为true，有这个类，否则没有这个类。2.数组—>数组中所有的类，都会添加到盒子上，本质就是一个class列表。语法:class="对象/数组"

Vue v-for 时，单个元素class的控制

liuhongyi0104的博客

08-22

6152

Vue v-for 时，单个元素class的控制只要一句表达式，加一个控制控制变量<template> <ul> <li v-for="(item,index) in arr" :class="{red:index==indexPrev}" v-on:click="changeColor(index)">{{item}}</li></ul> </template> <sc

vue变量控制标签包含不同的class，并实现图标闪烁

string佳佳的博客

04-14

1403

* 变量控制class类名： : class=" 变量? ' 类名1 类名2 ' : ' 类名1 ' " * 实现图标闪烁 data先定义变量haveErrorData:true <div class="floatBtn"> <div :class="haveErrorData?'errorIcon change':'errorIcon'" style="width:...

动态class写法

jtpython666的博客

05-03

460

动态class写法 <template> <view style="display: flex;justify-content: center;"> <image :class="{'animate__animated animate__slideInDown':showAi}" src="../../static/uni.png" mode="" style="width: 100px;height: 100px;"></image&gt

vue.js :class

02-23

Vue.js是一种流行的JavaScript框架，用于构建界面。其中的:class指令是Vue.js中的一个特性，用于动态地绑定CSS类。通过:class指令，我们可以根据不同的条件来动态地添加或移除元素的CSS类。 :class指令可以接受多种类型的值，包括对象、数组和字符串。当我们传递一个对象时，:class指令会根据对象的属性值来判断是否添加对应的CSS类。例如，我们可以根据某个条件来动态地添加或移除一个CSS类： ```html <div :class="{ 'active': isActive }"></div> ``` 在上面的例子中，如果isActive为true，则会给div元素添加active类；如果isActive为false，则会移除active类。 :class指令还可以接受一个数组，数组中的每个元素都会被添加为CSS类。这样我们可以根据多个条件来动态地添加或移除多个CSS类： ```html <div :class="[classA, classB]"></div> ``` 在上面的例子中，classA和classB是两个变量，它们的值可以根据需要进行动态修改。除了对象和数组，我们还可以直接传递一个字符串作为:class指令的值。这样可以直接将字符串作为CSS类添加到元素上： ```html <div :class="'my-class'"></div> ``` 这是:class指令的基本用法，通过动态地绑定CSS类，我们可以根据不同的条件来改变元素的样式，实现更加灵活和交互性的用户界面。