<!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. spring cloud + spring boot + springmvc+mybatis分布式微服务云架构

    做一个微服务架构需要的技术整理: View: H5.Vue.js.Spring Tag.React.angularJs Spring Boot/Spring Cloud:Zuul.Ribbon.Fei ...

  2. php留言板程序

    =================== 先创建note.php <html><head><title>PHP留言本</title></head&g ...

  3. 团队作业4——beta冲刺

    beta冲刺准备 冲刺准备 5天冲刺博客 Beta冲刺一 Beta冲刺二 Beta冲刺三 Beta冲刺四 Beta冲刺五 用户使用报告 用户使用用报告 冲刺总结 冲刺总结随笔 项目码云地址 码云地址

  4. unity UI如何开启（显示）或者关闭（隐藏）Panel界面最好？

    https://segmentfault.com/a/1190000012357091 unity UI如何开启(显示)或者关闭(隐藏)Panel界面,相信大家都是知道的,但是如何做最好呢? 可能大家 ...

  5. 2016/12/21 dplの课练

    1.将/etc/passwd第行的最后一段全部改成/bin/bash cat 1 |sed -n '1,$p' |egrep '.*:' -o |sed 's/$/\bin\/bash/' 2.将/e ...

  6. OpenStack源码分析 Neutron源码分析（一）-----------Restful API篇

    原文:https://blog.csdn.net/happyanger6/article/details/54586463 首先,先分析WSGI应用的实现. 由前面的文章http://blog.csd ...

  7. vs2017 创建虚拟目录失败 http//locＸＸＸＸＸＸ,vs2015 无法访问IIS源数据

    两个版本ide打开的错误提示不一样,但是一个解决都解决了 这个问题折磨了我接近五个小时 终于找到了解决方案,在百度上面搜的都没什么鸟用,最终还是在stackoverflow找到了解决方案,附上连接,虽 ...

  8. SpringBoot的学习【7.引入配置文件】

    1.@PropertySource 作用:加载指定的配置文件 2.@ImportResource ---恢复内容结束---

  9. Knut重排算法

    /// <summary> /// 这是Knut重排算法的实现 /// </summary> /// <param name="number"> ...

  10. web3js 进行转账

    1.准备阶段 部署以太坊geth 安装nodejs npm install web3 npm install npm install ethereumjs-tx 其中, web3是1.0.0.beta ...