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

转载 已于 2022-03-24 16:46:02 修改 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/u012345683/article/details/105146767
文章标签：

#vue

于 2022-03-23 23:39:11 首次发布
本文详细解析了Vue.js中动态控制样式的两种方法：`:class`和`:style`。通过实例展示了如何使用`:class`根据条件间接动态控制CSS类，以及`:style`直接动态设置样式属性。强调了`:style`在动态控制样式方面的灵活性。

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

Vue.js 实战：打造交互式兴趣标签选择界面 从零开始：使用 Vue.js 构建动态标签选择功能 新手友好的 Vue 项目实战：兴趣标签选择器 Vue.js 简单入门项目 | 创建兴趣标签选择功能
南北极之间
11-05 860
在这篇文章中，我们将用 Vue.js 构建一个兴趣标签选择功能，让用户可以点击选择或取消选择标签。这个项目适合 Vue 新手练习，教程包括完整代码和详细步骤，帮助你快速上手。显示一组兴趣标签，用户可点击标签来选择或取消选择。点击标签时，标签颜色和大小会发生变化，显示选择状态。使用 Vue.js 数据绑定和事件处理来控制标签的交互。Vue.js 的v-for和条件类绑定的使用。Vue 方法和data属性的基本操作。通过 CSS 实现选中状态的动态样式效果。
详细分析 Vue 绑定 :class 失效的原因分析（附解决思路）
码农研究僧的博客
03-20 247
绑定了一个未定义的变量，Vue 就无法正确解析 class，导致样式失效。因此，确保变量是字符串或对象，并且是 Vue 响应式数据，可以避免 class 绑定问题
Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制
qq_31455841的博客
12-15 497
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
动态控制class(样式)
hbvh1的博客
11-05 277
<div class="progress assigntasks" :class="[ this.percentage > 50 ? 'isActive' : '' ]"> </div> .isActive{ box-shadow: 1px 2px 3px #000000; }
vue 动态控制class
青春不打烊的博客
04-10 2252
<el-input :class="{'myClassbHouseNameA':cellNameList.houseState=='01','myClassbHouseNameC':cellNameList.houseState=='02','myClassbHouseNameR':cellNameList.houseState=='03','myClassbHouseNameT':c...
vue关于class和样式的使用
weixin_30457465的博客
03-13 138
这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。 不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强...
vue中动态控制class
qq_41445106的博客
05-12 2037
1.直接绑定对象（一） <div id="app"> <p class="static" :class="{red: isRed, blue:isBlue}">昨天再好也回不去，明天再难也要抬脚继续～</p> </div> <script> var watchExampleVM = new Vue({ el: '#app', data: { isRed: true,
Vue3动态class，样式动态绑定
最新发布
2401_89806660的博客
06-10 1287
的 CSS 属性时，Vue 会自动为他们加上相应的前缀。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。除了字符串外，表达式的值也可以是对象或数组。同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。绑定一个包含多个样式对象的数组。
深入探寻 Vue 中 Class 与 Style 绑定：解锁动态样式的奥秘
前端开发探索之旅
02-20 1219
Vue 中的 Class 与 Style 绑定是非常强大且灵活的功能，通过对象语法和数组语法，我们可以轻松地实现动态样式的更新。无论是简单的状态切换还是复杂的主题切换，这些绑定都能为我们提供高效的解决方案。在实际开发中，我们要根据具体的需求选择合适的绑定方式，并遵循最佳实践，以提高代码的质量和可维护性。掌握了 Vue 的 Class 与 Style 绑定，我们就能在前端开发中更加游刃有余地打造出交互性强、动态效果丰富的页面。基本用法：使用对象语法时，我们在:class。
vue 动态添加class,三个以上的条件做判断方式
01-22
如果 status为1，样式为redRoom 如果 status为2，样式为greenRoom1 ...补充知识：vue 根据变量值来判断显示class 我就废话不多说了，大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’
VUE class style 样式控制
qq_26239917的博客
05-22 551
class .a{ border:2px solid red; } .b{ background: darkmagenta; } data:{ title:"class && style 动态绑定 ", flagA:true, cla...
vue 动态绑定class样式
zmy967131的博客
11-28 416
vue 动态绑定class样式
Vuejs005---使用 class 样式
rngigskt的博客
08-24 464
使用 class 样式 使用 vuejs 控制样式，会使样式变化的操作更加的灵活 （1）class 样式的使用 案例 1：传递一个 class 样式的数组，通过 v-bind 做样式的绑定 该形式与之前的形式没有太大的区别 :class="[样式 1,样式 2]" 案例 2：通过三目（元）运算符操作以上数组 boolean?true 执行 :false 执行 案例 3：使用对象（json） 来表达以上三目（元）运算符的操作 {样式:flag} 案例 4：
vue中v-bind控制class和style
m0_72168336的博客
06-13 1351
当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。
Vue v-for 时，单个元素class的控制
liuhongyi0104的博客
08-22 6223
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 1471
* 变量控制class类名： : class=" 变量? ' 类名1 类名2 ' : ' 类名1 ' " * 实现图标闪烁 data先定义变量haveErrorData:true <div class="floatBtn"> <div :class="haveErrorData?'errorIcon change':'errorIcon'" style="width:...
动态class写法
jtpython666的博客
05-03 521
动态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 中的 样式的使用
weixin_63757502的博客
03-23 814
【代码】vue 中的 样式的使用。
vueDay03——可灵活变动的class样式
m0_72678953的博客
10-25 984
有时候我们需要对不同身份的用户在同一个组件上展示不同的样式（界面这里暂且不谈），我们就需要控制该组件在不同的数据下呈现不同的样式这时候我们就可以使用:class属性来动态调整样式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值