vue中动态添加class类名的方法
更新时间：2018年09月05日 09:36:25 作者：garyHoH
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 动态添加class类名，灵活得让你发狂，下面示例几个
<template>
<div>
<h2>动态添加类名</h2>
<!-- 第一种方式:对象的形式 -->
<!-- 第一个参数 类名， 第二个参数：boolean值 -->
<!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
<!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
<p :class="{'p1' : true}">对象的形式(文字的颜色)</p>
<p :class="{'p1' : false, 'p': true}">对象的形式(文字的颜色)</p>
<!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>
<!-- 第三种方式: 数组的形式 -->
<p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>
<!-- 数组中用对象 -->
<p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>
<!--补充: class中还可以传方法，在方法中返回类名-->
<p :class="setClass">通过方法设置class类名</p>
</div>
</template>
<script>
export default {
data () {
return {
isTrue: 'p1',
isFalse: 'p'
}；
}，
method: {
setclass () {
return 'p1';
}
}
}
</script>
<style scoped>
.p1 {
color: red;
font-size: 30px;
}
.p {
color: blue
}
</style>
以上这篇vue中动态添加class类名的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
双向数据绑定原理主要运用了发布订阅模式来实现的，通过Object.defineProperty对数据劫持，触发getter，setter方法，这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于vuejs路由的传参及路由props配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
这篇文章主要介绍了Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue cli构建的项目中请求代理与项目打包问题,需要的朋友可以参考下2018-02-02
前端经常会用到UI提供的各种图表,推荐阿里的图标库,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Vue实现web分页组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue基于v-charts封装双向条形图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
我们都知道Electron项目分为了主进程和渲染进程,主进程其实就是我们的Electron,渲染进程就相当于我们的Vue项目,下面这篇文章主要给大家介绍了关于vue项目使用electron进行打包操作的全过程,需要的朋友可以参考下2023-03-03
最新评论