<!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. MySQL中MyISAM与InnoDB区别

    原文:https://blog.csdn.net/frycn/article/details/70158313?utm_source=copy InnoDB:支持事务处理等不加锁读取支持外键支持行锁不 ...

  2. pip install beautifulsoup4.失败

    在学习python爬虫时,用到bs4解析网页,开始遇到安装bs出错 Collecting beautifulsoup4Exception:Traceback (most recent call las ...

  3. python 全栈开发笔记 3

    正则表达式 正则表达式(RE)是一种小型的,高度专业化的,它镶嵌在python中,并通过re模块实现,正则表达式编译成一系列的字节码,然后由用c编写的匹配引擎执行. #正则表达式 import re ...

  4. C#异常：未将对象引用设置到对象的实例。

    异常:未将对象引用设置到对象的实例. 一般是定义的变量或者数组等,没有赋初始值. 赋初始值后问题解决.

  5. .net webService保存全局变量中

    遇到坑,然后找到解决方案,我就习惯做个记录. 情景:通过webservice调用一个第三方的库,在初始化第三方库的时候需要花费较长时间 目的:希望通过初始化一次,缓存下来,下次直接调用,而不必每次初始 ...

  6. tp5.0中使用PHPexcel，以及Loader的一些问题

    在5.0中使用PHPexcel遇到一些问题,记录一下方便以后查看. 非使用PHPexcel的方法: 参考:http://blog.csdn.net/sinat_35861727/article/det ...

  7. js datagrid 移动去重

    function dataLeft(){ var checkedData = $(listTemplate_right).datagrid('getChecked'); var rows = $(li ...

  8. python文件（概念、基本操作、常用操作、文本文件的编码方式）

    文件 目标 文件的概念 文件的基本操作 文件/文件夹的常用操作 文本文件的编码方式 01. 文件的概念 1.1 文件的概念和作用 计算机的 文件,就是存储在某种 长期储存设备 上的一段 数据 长期存储 ...

  9. seckill（1）秒杀系统主要步骤

  10. ACE + TAO工程中的Messenger启动过程

    1.启动NameService服务 F:\ACESource\ACE_wrappers\TAO\orbsvcs\Naming_Service>tao_cosnaming.exe -o F:\AC ...