<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

<div id="app">

    <ul>

        <li v-for="item in tabs" :class="[classA, {classB: isB, classC: isC}]">

            {{ item.text }}

        </li>

    </ul>

</div>

<script type="text/javascript">

    new Vue({

        el:'#app',

        data: {

            classA: 'A',

            isB: false,

            isC: true,

            tabs: [{

                text:'巴士'

            },{

                text:'快车'

            },{

                text:'专车'

            },{

                text:'顺风车'

            },{

                text:'出租车'

            },{

                text:'代驾'

            }]

        }

    })

</script>

<style type="text/css">

    .A{

        color: red

    }

    .classC{

        text-decoration: underline;

    }

    .classB{

        font-weight: bold

    }

</style>

</body>

</html>

　　

vue添加class类名的更多相关文章

  1. vue通过控制boolean值来决定是否添加class类名

    vue通过控制boolean值来决定是否添加class类名

  2. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  3. vue添加背景音乐

    vue添加背景音乐需要用到HTML中的标签 参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp *在iOS端autopl ...

  4. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  5. vue里的样式添加之类名改动 和style改动

    类名下有不同样式,通过增加或者减少类名,来增加或减少样式. v-bind:class = {类名:变量,类名:变量...}  变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上 v-b ...

  6. jQuery CSS 添加/删除类名

    addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例 一 :为匹配的元素加上 'sele ...

  7. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  8. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  9. 百度地图API示例：使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

随机推荐

  1. java导出Excel定义导出模板

    在很多系统功能中都会有Excel导入导出功能,小编采用JXLS工具,简单.灵活. JXLS是基于 Jakarta POI API 的Excel报表生成工具,它采用标签的方式,类似于jsp页面的EL表达 ...

  2. 输入系统：进程间双向通信(socketpair+binder)

    一.双向通信(socketpair) socketpair()函数用于创建一对无名的.相互连接的套接子,如果函数成功,则返回0,创建好的套接字分别是sv[0]和sv[1]:否则返回-1,错误码保存于e ...

  3. Java String 常量池理解

    String:字符串常量池 作为最基础的引用数据类型,Java 设计者为 String 提供了字符串常量池以提高其性能,那么字符串常量池的具体原理是什么,我们带着以下三个问题,去理解字符串常量池: 字 ...

  4. phpstrom mac 快捷键

    对应键 ⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn 编辑 Command+alt+T 用 (if..e ...

  5. rabbitmq web 管理系统的信息

    rabbitmq web 管理系统的信息   端口 15672 帐号密码 guest/guest 要开启web 管理, 需要手动执行命令: rabbitmq-plugins enable rabbit ...

  6. if else 和if elif else的区别

    def fuck(a): if a ==1: print(a) if a ==2: print("not good") else: print("tamade" ...

  7. 用java代码作日历

    import java.util.Calendar; public class CalendarBean { String day[]; int year=2005,month=0; public v ...

  8. Sharepoint 2016 配置FBA（一） 创建Membership数据库

    在Sharepoint 2016上配置FBA(forms based authentication)的过程和Sharepoint 2013一样. 第一步:创建Membership数据库. 为了存放所有 ...

  9. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  10. leetcode 买卖股票问题

    leetcode121 Best Time to Buy and Sell Stock 说白了找到最大的两组数之差即可 class Solution { public: int maxProfit(v ...