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类名的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
我需要向常规类列表中添加一个动态类，但不知道如何添加（我使用的是babel），如下所示： 有什么想法吗？
-
本章将讨论addClass()方法，它是用于管理jQueryUI视觉效果的方法之一。 addClass()方法允许动画对CSS属性的更改。 addClass()方法为匹配的元素添加指定的类，同时为所有样式更改设置动画。 语法 (Syntax) 在jQueryUI的1.0版中添加 addClass()方法的基本语法如下 - .addClass( className [, duration ] [,
-
本文向大家介绍jQuery使用toggleClass方法动态添加删除Class样式的方法，包括了jQuery使用toggleClass方法动态添加删除Class样式的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下： jQuery通过toggleClass方法动态添加删除Cla
-
本文向大家介绍C#中DataGridView动态添加行及添加列的方法，包括了C#中DataGridView动态添加行及添加列的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了C#中DataGridView动态添加行及添加列的方法。分享给大家供大家参考。具体如下： Datagridview添加列： Datagridview创建行： 希望本文所述对大家的C#程序设计有所帮助。
-
本文向大家介绍在vue中给列表中的奇数行添加class的实现方法，包括了在vue中给列表中的奇数行添加class的实现方法的使用技巧和注意事项，需要的朋友参考一下 ---------笔记--------- 实现效果：给列表中的奇数或偶数添加class 奇数行：:class="{'active':index%2 != 1}" 偶数行：:class="{'active':index%2 != 0}"
-
本文向大家介绍Vue 动态添加路由及生成菜单的方法示例，包括了Vue 动态添加路由及生成菜单的方法示例的使用技巧和注意事项，需要的朋友参考一下 写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由 利用 vue-router 的 addRoutes