vue动态绑定class

最新推荐文章于 2023-09-07 11:49:56 发布
最新推荐文章于 2023-09-07 11:49:56 发布
阅读量88 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34629527/article/details/129069685
版权

1、对象方法
用花括号{}包裹起来，类名用引号引起来
第一个参数是类名，第二个参数是boolean值

<div :class="{'class1':isShow}"></div>

在这里插入图片描述

还可以这样写：

 <div :class="{'class1':isShow==1}"></div>
  <div :class="{'class1':isShow==index}"></div>

也可以写多个：

<div :class="{'class1':isShow2==1,'class2':isShow2==2}"></div>

2、数组写法
在这里插入图片描述
数组与三元运算符结合绑定class：
在这里插入图片描述
还可以这样写：

       <div :class="[showWihch?'class1':'']"></div>
       <div :class="[showWihch?'class1':'class2']"></div>
       <div :class="[showWihch==1?'class1':'class2']"></div>
       <div :class="[showWihch<1?'class1':'class2']"></div>
       <div :class="[{'isshow':true},'class2']"></div>
qq_34629527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 动态class绑定
lmh19921116的博客
03-12 67
<h2 :style="{color: dColor, fontSize: dFontSize + 'px'}">今天天气不错</h2> <h2 :style="objStyle">今天天气不错</h2> <h2 :style="[objStyle1, objStyle2]">今天天气不错</h2> data(){...
Vue动态绑定Class常用的几种方式
丑小喵的博客
10-20 1万+
总结Vue动态绑定Class常用的几种方式
【vue】Vue中class样式的动态绑定
小墨鱼的前端问题录
07-27 2270
样式个数、类名确定，通过Bollean动态展示与否。注意：字符串使用的是vue实例data中已有的属性。：需要绑定的样式个数不确定，类名也不确定。
Vue 动态绑定Class常用的几种方式
weixin_48596030的博客
04-20 4690
【代码】Vue 动态绑定Class常用的几种方式。
vue动态绑定class的几种方式
weixin_63896561的博客
12-16 1741
vue动态绑定class
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue动态绑定class的几种常用方式小结
10-16
在Vue.js中，动态绑定`class`是一种常见且强大的特性，允许我们根据组件的状态或数据来改变元素的样式。本文将详细讲解Vue中几种常用的动态绑定`class`的方法。 1. **对象方法** - **基础绑定**：最简单的方式是...
vue动态绑定 class 的丰富案例
最新发布
08-07
本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。
快速解决vue动态绑定多个class的官方实例语法无效的问题
10-18
总结来说，遇到Vue动态绑定class无效的问题时，我们应该首先检查数据响应式问题，确保类名变量在Vue实例的作用域中且正确响应数据变化。在对象语法和数组语法都无效时，可以尝试使用data定义变量或计算属性返回数组...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
vue动态class的写法
花生日记
05-24 2342
当我们创建了一个新的 class对象后，我们就可以给该对象赋值了，如果你的属性值是一个整数或者字符串，那么你可以将其直接赋值给变量，如果是字符串则可以赋值给字符串变量。首先我们需要定义一个变量来作为该函数的参数，然后我们可以通过下面的代码来查看： 上面的代码是将“submit”类型的变量定义为v-mount类型，并将其初始化为0,最后将这个变量赋值给了“submit”类型的变量。使用“return”来结束一个函数是非常简单的，因为“return”本身就是一个函数，它可以让你在函数执行完之后立即返回结果。
Vue项目中使用class强行绑定计算属性函数
u012211003的博客
07-21 3322
在vue开发中，有时候我们需要使用计算属性函数，但是又没有具体的调用方式，这时可以将该函数强行绑定到class中。 例如有如下函数在computed计算属性中： options: function () { let companyListData = this.$store.getters.getCompanyData || []; console.log("companyListData:", companyListData); let list = []; for (let i = 0;
vue :class 调用函数
IT技术宅-北方的刀郎
08-22 1363
vue :class 调用函数，一些杂的判断就可以在函数钟进行写了。
[ vue ] 函数式组件中的class与style处理
ljw1412的博客
05-15 2442
引言：什么是函数式组件 没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。 一个函数式组件就像这样： Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺
vue中动态绑定class方法
weixin_38225763的博客
09-07 148
【代码】vue中动态绑定class方法。
VUE 比较函数和计算属性 + class数据绑定 +style 数据绑定
a603423130的博客
07-20 653
计算属性 computed computed 选项定义计算属性 计算属性 类似于 methods 选项中定义的函数 计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。 函数 每次都会执行函数体进行计算。 需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分 ...
vue基础--动态class、动态style、过滤器filter、方法methods、计算属性computed、侦听器watch
小白小白从不日别的博客
08-06 2460
目录 一、动态class 1.1 基本用法 1.2 示例 二 、动态style 2.1 基本用法 2.2 示例 三、过滤器filter 3.1 定义使用 3.2 额外用法--传参和多过滤器 3.4 综合示例 四、方法methods 4.1 .使用绑定事件的方式 4.2 在插值表达式里({{}}) 五、计算属性computed 5.1 语法 5.3 计算属性完整写法 六、侦听器watch 6.1 初识侦听器 6.2 侦听器的基本使用 6.3 深度侦听 6.4 w...
vue动态绑定class的几种方法
热门推荐
u013994400的博客
06-23 8万+
vue动态绑定class的几种做法
vue 动态绑定class
09-14
在Vue中，动态绑定class有多种方法。第一种方法是使用对象语法，可以根据条件来动态地添加或删除class。例如，可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为条件。当属性值为真时，对应的class会被添加到元素上。例如，可以使用以下代码来动态绑定class： ```html <div :class="{'active': isActive}">文字</div> ``` 其中，`isActive`是一个布尔值，如果`isActive`为真，则`active`类会被添加到`<div>`元素上。 第二种方法是使用数组语法，可以根据多个条件来动态地添加或删除class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个数组，数组中的每个元素都是一个条件表达式或者是一个class名。如果条件表达式为真，则对应的class会被添加到元素上。例如： ```html <div :class="[activeClass, errorClass">文字</div> ``` 其中，`activeClass`和`errorClass`都是字符串类型的class名，如果它们对应的条件为真，则对应的class会被添加到`<div>`元素上。 第三种方法是使用对象语法的缩写形式，可以更简洁地绑定class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为布尔值。如果属性值为真，则对应的class会被添加到元素上。例如： ```html <div :class="{activeTwo: isActive, 'activeThree': hasError}">文字</div> ``` 其中，`isActive`和`hasError`都是布尔值，如果它们为真，则`activeTwo`和`activeThree`类会被添加到`<div>`元素上。 这些方法都可以实现动态绑定class，并根据条件来添加或删除class，以实现样式的动态改变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值