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. ...
随机推荐
- 报表工具highcharts使用心得
公司让做一个报表页面,搜索了下发现highcharts比较符合业务需求,下面就说一下使用心得. $('#container').highcharts({ title: { text: '部门统计图' ...
- 配置solr6.2
1 解压solr ,把 solr-6.2.0\server\solr-webapp下的 webapp 文件夹拷贝到tomcat 的webapps下,重命名为solr,也可以是其他名字: ( 注意,此处 ...
- CString与string、char*的区别和转换
转自:http://blog.csdn.net/luoweifu/article/details/20232379 我们在C++的开发中经常会碰到string.char*以及CString,这三种都表 ...
- Thread线程notify方法的自我理解
感谢博主:http://zy19982004.iteye.com/blog/1626916 这篇博文给予我线程知识很大的帮助 知识背景:(1)wait().notify()均是Object的方法,故每 ...
- shell进程中的特殊状态变量
$?:获取执行上一个指令的执行状态返回值(0为成功,非0为失败) $$:获取当前执行的shell脚本的进程号(PID) $!:获取上一个在后台工作的进程的进程号 $_:获取在此之前执行的命令或脚本的最 ...
- BUAAOO P1-P3 Expression Dirivation
目录 1.问题描述 1.1.概念定义 7.程序度量 8.知识点笔记 1.运行 2.1.方法 2.2.检测相等性 2.3.空串与null串 2.4.使用StringBuilder构建字符串 2.5.使用 ...
- wpf 事件
事件的本质是 系统消息 再winform中 消息被封装成了事件触发 这种就是 普通事件,特点就是 1对1,以及事件必须能访问到控件 才能绑定 在 wpf中 新概念 路由事件 ,路由区别是 不在是 ...
- 关于cordova+vue打包apk文件无法访问数据接口
作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app ...
- Qt自定义控件系列(一) --- 圆形进度条
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- 二进制32位转十进制int
public class BinaryToDecimal { public static int BinaryToDecimal(int binaryNumber){ int decimal = 0; ...