vue框架中的:class 的几种绑定方式

最新推荐文章于 2022-02-09 18:02:45 发布
最新推荐文章于 2022-02-09 18:02:45 发布
阅读量445 收藏
点赞数
分类专栏： VUE JavaScript 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JaveWong/article/details/120680206
版权

最简单的绑定

:class="{ 'active': isActive }"

判断是否绑定一个active

:class="{'active':isActive==-1}" 
/*或者*/ 
:class="{'active':isActive==index}"

绑定并判断多个

 

单纯数组

数组对象结合动态判断

数组与三元运算符结合判断选择需要的class

 

Jave2108
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
class绑定多个值 vue_vue动态绑定:class的几种方式
weixin_39661345的博客
12-24 3616
一、对象语法1、给v-bind:class 设置一个对象，可以动态地切换class，例如：var app = new Vue({el:'#app',data:{isActive:true}})最终渲染结果：2、对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存，例如：var app = new Vue({el:'#app',data:{isActive:tr...
vue动态绑定class的几种方式
weixin_63896561的博客
12-16 1732
vue动态绑定class
class样式悬停 :class=“{‘active‘:循环项==index}“
Neko的博客
01-07 1983
data(){ return{ 循环项：-1 }} style里面写active的样式
vue的:class={active:activ}可以动态切换class类名
weixin_34406061的博客
01-19 7469
2019独角兽企业重金招聘Python工程师标准>>> ...
input标签中 :class=”{active=isActive}”的Boolean值没有效果的解决方法。
WineRice的博客
12-13 2152
问题描述： input标签中 :class=”{active=isActive}”的Boolean值没有效果的解决方法。 <template> <input v-bind:class="{ active: isActive }" name="asd" value="123"> </template> <script> export default { data() { return { isActive: ture
vue class的绑定
不靠谱的作曲家
12-30 1915
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
#vue# active点击切换Class样式变化（附源码）
ZHENGCHUNJUN的博客
10-14 817
j
vue计算属性+vue中class与style绑定(推荐)
11-21
在Vue中，有几种关键特性用于增强模板的功能性和可维护性，包括计算属性（Computed Properties）和指令（Directives）。本篇文章将深入探讨Vue计算属性以及如何在模板中绑定`class`和`style`。 ### Vue 计算属性 ...
简单谈谈Vue 模板各类数据绑定
11-23
Vue的数据绑定主要包括以下几个方面： 1. **Mustache语法**：`{{ }}` 是Vue中最基础的数据绑定语法，用于输出数据到DOM中。例如 `{{ msg }}` 会将实例中的`msg`属性值插入到HTML中。Vue会自动处理数据的更新，当`...
vue学习日记17：scoped样式冲突
最新发布
03-21
在Vue.js框架中， scoped样式是用于实现组件的样式隔离，它通过添加一个唯一的属性到CSS选择器来确保样式只作用于当前组件。这个特性在开发大型应用时尤其有用，因为它帮助维护代码的整洁和可预测性。然而，有时我们...
vue实现简单的MVVM框架
10-18
以上是基于MVVM模式实现一个简单Vue框架的主要步骤。在实际的Vue.js中，还有更多复杂的特性，如虚拟DOM、组件系统、生命周期钩子等，这些都是构建复杂前端应用不可或缺的部分。通过理解这些基础知识，可以更深入地...
vue-preview-bug:vue-preview使用Bug
04-08
`vue-preview`是一款专为Vue设计的图片预览和灯箱插件，它提供了一种简洁而高效的方式来实现这一功能。然而，在实际应用中，可能会遇到一些问题和bug，如“vue-preview-bug:vue-preview使用Bug”所描述的那样。 ...
vue2练习五个小例子笔记
打杂人
02-22 6223
https://segmentfault.com/a/1190000008436978 主题 Vue.js vue2练习五个小例子笔记 多练习,多撸代码,多进步. 基于vue2 1.双向数据绑定 div id="main" @click="hideTooltip"> div class="tooltip" v-if="show_tooltip" @c
vue设置isactive_vue 绑定样式的几种方式
weixin_42524762的博客
01-17 4070
vue 绑定样式对象语法1.v-bind:class设置一个对象，动态切换classxxx样式是否起作用，根据isActive的布尔值是否为true2.:class可以和class共存xxx当isActive值为true，isError为false，样式为 static和isActive。当isActive值为false，isError为true，样式为 static和isError。当isAct...
27-【Vue基础】:class的几种绑定方式
小凡子的博客
02-09 1734
:class的几种绑定方式(对象、数组方法)
vue 绑定类名class 之法
做一个有知识的流氓
06-21 730
仍晓柳絮画中仙 不及佳人半分颜 :class可以和普通类名共存 <li v-for=" (item, i) in wpList" :key="i" class="list" :class="{active : active == item.name}" @click="courseVideoLi(item.name)"> <div class="listLeftBo...
vue之动态添加class(active)的方法大全
热门推荐
sxjit的博客
03-29 3万+
过来人常说“要想学vue，必先忘记js”，这是因为vue控制dom节点的思维方式和js不大相同。vue项目中如何点击元素动态添加active-class？今天来分享多种解决方式。 一. v-for循环情况下动态添加： 1.v-for循环元素，绑定key 2.在data中创建标识isActive=0，这是为了初始化第一个标题为active 3.监听单击事件触发方法，传入点击元素的index改变标识 ...
vue中的:class
09-04
:class是Vue框架中的一个指令，用于动态地绑定HTML元素的class属性。通过:class指令，我们可以根据不同的条件为一个元素添加或移除一个或多个CSS类。这样可以实现根据不同的状态或数据来改变元素的样式。 在Vue中使用:class指令有几种常见的方式： 1. 单个class绑定：可以直接将一个字符串作为:class的值，这个字符串将被作为class的名称添加到元素上。例如:class="a"表示给元素添加一个名为"a"的class。 2. 对象语法：可以通过一个对象来绑定:class，对象的属性名为类名，属性值为布尔值，为true时表示添加该类名，为false时表示移除该类名。例如:class="{ active: isActive }"，当isActive为true时，元素将添加名为"active"的class。 3. 数组语法：可以通过一个数组来绑定:class，数组中的每一项都会被作为class的名称添加到元素上。例如:class="[classA, classB]"，classA和classB都是字符串，元素将同时添加这两个class。 可以根据需要选择合适的:class绑定方式来动态改变元素的样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中的 :class](https://blog.csdn.net/qq_46848085/article/details/126564497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [关于vue 里:class 的几种使用方式](https://blog.csdn.net/datishi8133/article/details/102082018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值