<!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. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...

  2. SQL求几何重心

    ST_Centroid(geometry); geometry :a specified ST_Geometry e.g.: select ST_AsText(ST_Centroid('0103000 ...

  3. while循环与 for循环

    import turtle turtle.setup(600,400,0,0) turtle.bgcolor('red') turtle.color('yellow') turtle.fillcolo ...

  4. AX视图View中添加静态方法

    public static server str  EcoResCategoryName(){    DictView dv = new DictView(tableNum("ViewNam ...

  5. 如何在linux环境安装JDK

    1. 到JDK官网下载相应的安装包 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

  6. console.log()中的运算与打印事件

    var p=function() { var i = 0; function b() { console.log(i--);//先打印再减一 //console.log(--i);先减一再打印 } f ...

  7. python初学代码留个纪念

    最简单的代码  if   else if  else 1.python中else if   用  elif表示 2.注释: 单行注释:##### 多行注释:''' ------''',"&q ...

  8. css 清楚浮动的几种方式

    方法一: 使用clear属性的空元素 <div style="clear:both;"></div> 方法二:使用overflow属性 给浮动的元素容器添加 ...

  9. python学习笔记3-函数

    一.函数高级特性 1)列表生成式,列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. eg: >>> list(r ...

  10. c# 连接数据库SqlHelper

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...