<!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. PAT B1023

    PAT B1023 标签(空格分隔): PAT 解决方法:贪心法 #include <cstdio> int main() { int count[10]; for (int i = 0; ...

  2. nodejs02-fs模块

    文件操作模块:fs-filesystem(异步) //readFile(文件名,回调函数) fs.readFile(); fs.readFile("aaa.txt",functio ...

  3. if else 和if elif else的区别

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

  4. JDBC学习DayTwo

    一.利用反射及JDBC元数据编写通用的查询方法 1.ResultSetMetaData 定义:描述ResultSet的元数据对象,即从中可以获取到结果集中有多少列.列名是什么. 获取 ResultSe ...

  5. redis学习步骤

    Redis简介 redis全称REmote DIctionary Server,是一个由Salvatore Sanfilippo写的高性能key-value存储系统,其完全开源免费,遵守BSD协议.R ...

  6. CSS效果：动态图标

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  7. sdn-准备-虚拟机迁移-vxlan

    知识基础: 虚拟机到虚拟机的迁移(Virtual-to-Virtual) V2V 迁移是在虚拟机之间移动操作系统和数据,照顾主机级别的差异和处理不同的虚拟硬件.虚拟机从一个物理机上的 VMM 迁移到另 ...

  8. 注意&&前后两个表达式有顺序的差别

    //插入排序 public static void insertSort(int[] arr) { // 遍历所有数字 for (int i = 1; i < arr.length; i++) ...

  9. ios外部链接或者app唤起自己的app

    唤起自己的app,其实都是通过链接,关于这个需要了解下scheme,自己和调用方对接下协议,这里只是说明下到自己app指定页的问题 唤起自己的app分为两种情况 一.自己的app已经启动,那么唤起自己 ...

  10. Touch Gesture手势总结