vue添加class类名
<!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类名的更多相关文章
- vue通过控制boolean值来决定是否添加class类名
vue通过控制boolean值来决定是否添加class类名
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- vue添加背景音乐
vue添加背景音乐需要用到HTML中的标签 参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp *在iOS端autopl ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- vue里的样式添加之类名改动 和style改动
类名下有不同样式,通过增加或者减少类名,来增加或减少样式. v-bind:class = {类名:变量,类名:变量...} 变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上 v-b ...
- jQuery CSS 添加/删除类名
addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例 一 :为匹配的元素加上 'sele ...
- vue添加页面键盘事件
我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...
- Vue添加请求拦截器
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
- 百度地图API示例：使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
随机推荐
- JavaScript “函数重载”
函数重载(function overloading)必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力. JavaScript的每个函数都带有一个仅在这个函数范围内作用的变量argume ...
- volatile 与 JVM 指令重排序
前言: 在做单例模式时 有博客在评论区 推荐使用 volatile 关键字 进行修饰 然后用了两天时间查资料看文档 发现涉及的面太广 虽然已经了解为什么要使用 volatile + synchroni ...
- 安装vue脚手架和vue安装element-ui
首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.
- Problem A: 重载字符的加减法
Description 定义一个字符类Character,只有一个char类型的数据成员. 重载它的+.-.<<和>>运算符,其中+.-的第二个操作数是int类型的整数n.“+ ...
- php上传文件配置
根据需要调整php.ini文件内容,完成后重启服务器即可. 上传文件相关配置内容: file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_d ...
- JVM概念以及常用设置
DAY 1 Jvm- java虚拟机 类加载子系统 加载class文件到方法区 方法区 存放类信息 常量信息 常量池信息 辅助堆栈的永久区,解决堆栈信息的产生,是先决条件 3. Java堆(重要) ...
- python小趣味_520绘制一个心形.
从某个公众号上看到的. 跑了一下, 居然可以成功运行. 有心的话可以研究下代码. 利用了turtle模块 #!/usr/bin/env python # coding:utf-8 import tur ...
- Linux CentOS 7 下的C++ 学习笔记01
1.虚拟机WMware 通过镜像安装CentOS 7系统(自行百度操作 虚拟机+镜像+安装一套都有) //安装时需要配置网络 //root设置密码 即为登录系统的账号和密码 2. C++ 环境设置 ...
- QT 定时器详解
编译器 : Qt Creator 在窗口化类中实现定时器 .h #include <QTimer> private slots: ... void onTimerOut(); priv ...
- jdk环境变量配置改变不生效的问题
在工作中两次遇到jdk配置上的这个问题:将环境变量中的jdk路径修改之后,使用-version查看,版本号还是之前的,也就是说修改未生效.甚至当我将Path变量中的jdk路径配置都删除了之后,使用-v ...