vue中绑定class属性几种场景

最新推荐文章于 2024-09-09 17:00:20 发布
最新推荐文章于 2024-09-09 17:00:20 发布
阅读量1k 收藏 3
点赞数
分类专栏： 前端 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/120181418
版权
本文详细介绍了Vue.js中如何使用`:class`指令动态绑定class。包括单个属性绑定、多个属性绑定及复杂逻辑时使用计算属性的方法。同时展示了在数组语法中的应用，如应用多个class、使用三元运算符以及结合对象语法处理多个条件。通过实例代码和渲染效果，帮助理解Vue.js中class绑定的灵活性。
摘要由CSDN通过智能技术生成

文章目录

1、在对象使用

1.1、绑定单个属性

需求说明

绑定class属性之后的div渲染结果如何

源码实现

1、创建vue项目

vue create 项目名字

2、代码实现

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">About</router-link>

    <div :class="{ active: isActive }">
      "<div class='active'>这是渲染后的标签</div>"
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isActive: true,
    };
  },
};
</script>

3、效果图

请添加图片描述

1.2、绑定多个属性

简要说明

对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存

需求说明

多个属性共同绑定实现，并且和普通class共同处理,渲染之后的class多个

源码实现

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">About</router-link>

    <div class="temp" :class="{
      'active':isActive,'tActive':isTActive
    }"></div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isActive: true,
      tActive:true
    };
  },
};
</script>

效果图

在这里插入图片描述

1.3、绑定表达式过长或逻辑复杂时，还可以绑定一个计算属性

简要说明

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed。

源码实现

1、创建vue项目
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、源码实现

<template>
  <div id="app">

    <div :class="classObject">classObject</div>
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      isActived: true,
      err: null,
    };
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActived && !this.err,
        test: this.err && this.err.type === "fatal",
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、效果图
在这里插入图片描述
在这里插入图片描述
4、渲染后的结果

<div class= active" >classobject</div>

2、在数组使用

2.1、当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表

关键源码实现

<template>
  <div id="app">

    <div :class="classObject">classObject</div>
    <div :class="[isActivate1,isActivate2]">classArray</div>
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      isActived: true,
      err: null,
      isActivate2:'isActivate2',
      isActivate1:'isActivate1',
    };
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActived && !this.err,
        test: this.err && this.err.type === "fatal",
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果图
在这里插入图片描述

2.2、三元运算符应用

源码实现

<template>
  <div id="app">
    <div :class="[isActivated ? isActivate1 : ' ', isActivate2]">三元表达式</div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isActived: true,
      err: null,
      isActivate2: "isActivate2",
      isActivate1: "isActivate1",
    };
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActived && !this.err,
        test: this.err && this.err.type === "fatal",
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果图
在这里插入图片描述
在这里插入图片描述

渲染结果

<div class="isActivate2">三元表达式</div>

2.3、class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法

关键代码实现

<template>
  <div id="app">
    <div :class="classObject">classObject</div>
    <div :class="[isActivate1, isActivate2]">classArray</div>
    <div :class="[isActivated ? isActivate1 : ' ', isActivate2]">三元表达式</div>
    <div :class="[{'active':isActivated},isActivate1]"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isActived: true,
      err: null,
      isActivate2: "isActivate2",
      isActivate1: "isActivate1",
    };
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActived && !this.err,
        test: this.err && this.err.type === "fatal",
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

geekmice
关注
专栏目录
Vue3-06-样式绑定-class绑定的写法总结
northcastle的博客
12-12 2061
Vue3 中使用 class 实现样式绑定
Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解（学习总结---从入门到深化）
03-24 526
Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解（学习总结---从入门到深化）
vue绑定表格多种状态class的方式
张许许的博客
06-13 999
例子html <div v-else-if="iten.val=='Sex'"> <span :class="{ 'sex_boy': scope.row.Sex == 0 , 'sex_girl': scope.row.Sex == 1 }"> <template v-if="scope.row.Sex == 0" >男&l...
vue样式绑定7种实现方法
最新发布
weixin_42242810的博客
09-09 453
混合使用动态绑定和模板语法，结合条件逻辑来动态设置多个样式。，对象的键是类名，值是布尔值，表示类是否应用。通过传递 Prop 来动态设置子组件的样式。，对象的键是 CSS 属性，值是属性值。将多个内联样式对象组合在一个数组中。利用计算属性实现更复杂的逻辑。将一个对象绑定到元素的。可以将一个数组绑定到。，数组中的元素是类名。
：class vue
小猪的博客
10-25 375
<div :class="ind.titleSrc?'bgImgSet':''"></div> 三元表达 如果存在两个动态class 可以如下这样写 注意标签上不能写两个:class 1 2 <divclass="allCommon " @contextmenu.prevent="clickSet(_module)" :...
class vue
琳琳的博客
05-09 887
class https://cn.vuejs.org/v2/guide/class-and-style.html 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。你可以在对象中传入更多字段来动态切换多个 cla.
vue中的 :class
CHunter1024的博客
08-28 2万+
vue中的 :class
vue--点击当前增加class,其他删除class的方法
10-18
此外，使用了v-bind:class来动态绑定class属性。class属性中的class1是当qwerqwre属性值等于当前元素的索引index时才会生效。这样，每次点击新的元素时，只有当前元素会根据index与qwerqwre的比较结果添加class1，而...
掌握Vue中v-bind动态绑定class的多种技巧
8. 实际应用场景: 了解了以上几种动态绑定class的方法后，开发者可以根据实际的应用场景来选择最合适的绑定方式。例如，在需要根据不同视图状态快速切换多个样式类的场景中，使用对象绑定会非常方便。而在需要动态...
简单理解vue中实例属性vm.$els
09-01
Vue提供了v-bind和v-on等指令，可以将DOM元素的属性或者事件与Vue实例中的数据进行绑定，从而响应数据的变化自动更新DOM，这样可以避免直接操作DOM带来的问题，如数据同步不一致等。 5. 由于vm.$els是Vue早期版本中...
Vue.js动态绑定class
我的小熊不见了
05-05 952
在项目中我们经常遇到需要动态切换`class`的需求，比如说点击图片放大，又或者选中项变颜色，再比如实现换皮肤的功能等等。这时候`vue`的动态`class`就能帮助我们了。 使用对象控制class boolean控制 <div v-bind:class="{ active: isActive }"></div> 在上面的语法中，active 是c...
vue :class
前端-舟遥遥的博客
11-25 320
:class <div :class="{ active: isActive }"> {{ isActive }} </div> <div :class="{ active: isActive, name1: nameActive }"> {{ isActive }}~{{ nameActive }} </div> <div :class="nameActive ? 'name1' : 'name2'"> {
vue中class的写法
m0_45219210的博客
04-10 2015
比如想给一个i标签添加一个class。 数组的写法 <i class="iconfont" :class="[style[type].icon]"></i> 当style[type].icon存在的时候就会自动添加上类名。 对象的写法 <i class="iconfont" :class="{'icon-warning':true}"></i> 当冒号后面为true的时候，会给标签加上类名，为false时则不会加 ...
Vue中的:class的使用
热门推荐
zhq_zvik的博客
01-29 5万+
一个样式 :class="{makeColor:username!=''}" 多个样式（三元） :class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"
vue :class 动态绑定样式_卓景京微课堂VUE开发常用知识
weixin_39589557的博客
11-25 212
VUE开发常用知识A:Vue (读音 /vjuː/，类似于view)作者：尤雨溪(EvanYou) 中国人是一套用于构建用户界面的渐进式框架。学习使用之前须掌握 HTML、CSS 和 JavaScript 等知识。B:VUE优点：小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合只关注视图层， 采用自底向上增量开发的设计它的目标是通过尽可能简单的 API 实现响...
vue绑定class
ead_gbe的博客
07-02 4732
字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。
VUE 动态绑定class类的三种常用方法及适用场景
weixin_37624974的博客
10-13 2488
前言 在实际开发中，我们会经常遇到动态绑定class的情况，常见的情况可能有：1，根据不同的返回值渲染不同的class样式（也就是两个及两个以上的动态class选择使用）；2，UI在设计时对于某个模块的样式没有确定下来的时候我们去写这个模块（给了基础样式）；3，UI在设计对于某个模块的样式有很多样子，但不确定用是否全部使用时（给了基础样式）。针对这三种常见的情况我们在写页面样式时可已选择这三种常见的动态加载calss的方法。 一：动态选择class样式（对象添加：情景一） <template&gt
【vue】:class和:style
richest_qi的博客
07-16 801
:class :class='js表达式' 表达式是一个对象 该对象内联在模板里，:class="{key:value}" key是类名， value是布尔值。 value为true则有该类，false则没有该类 <template> <p :class="{smallFont:isSmall}">have a nice day</p> </template> <script> export default { data(){
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6998
在vue中为我们提供了 几种方式来使用class类的样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值