Vue 动态绑定类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态绑定类名</title>
<link rel="stylesheet" type="text/css" href="vue.css">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>动态 CSS CLASS </h1>
<h2> 示例 1</h2>
<div v-bind:class="{changeColor:changeColor}">
<span>你妹的</span>
</div>
<!--这里绑定单击事件 相当于 给自己取反--->
<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
<span>你妹的</span>
</div>
<h2 v-bind:class="{red:false}">示例 2 false 静态更改 样式</h2>
<h2 v-bind:class="{red:true}">示例 2 true，查看样式注意有什么不同之处</h2>
<button v-on:click="changeColor=!changeColor"> change color</button>
<button v-on:click="changeLength=!changeLength"> change length</button>
<div v-bind:class="compClasses">
<span>大哥哥</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
类名动态绑定 HTML
new Vue({
el:'#vue-app',
data:{
changeColor:false,
changeLength:false
},
methods:{
},
computed:{
compClasses:function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
})
Vue.js
span{
background:red;
display:inline-block;
padding:10px;
color:#fff;
margin: 10px 0;
}
.changeColor span{
background:green;
}
.changeLength span:after{
content:"length";
margin-left:10px;
}
CSS
Vue 动态绑定类名的更多相关文章
- 微信小程序如何像vue一样在动态绑定类名
微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...
- vue动态绑定class的最常用几种方式
vue动态绑定class的最常用几种方式: 第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...
- vue动态绑定属性--基本用法及动态绑定class
动态绑定属性v-bind:,语法糖形式:省略v-bind,仅写一个冒号. 一.动态绑定基本属性 1 <body> 2 <!-- v-bind 动态绑定属性-基本用法 --> 3 ...
- vue动态绑定类样式ClassName知多少
对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...
- vue动态绑定src加字符串拼接
关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...
- vue动态绑定background：url绑不上的问题
场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...
- vue 动态绑定height以及v-if、v-else的使用
动态绑定height: :style="{height: slideHeight+'rem'}" slideHeight: 2 如果需要计算来得到高度,如: <p :styl ...
- vue动态绑定图片和背景图
1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...
- Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4 使用进度条的话 就没有2.9. ...
随机推荐
- GIS案例学习笔记-多边形内部缓冲区地理模型
GIS案例学习笔记-多边形内部缓冲区地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:对于多边形,建立内部缓冲区. 问题:ArcGIS缓冲工具不支持内部 ...
- 吴裕雄 python深度学习与实践（1）
#coding = utf8 import threading,time count = 0 class MyThread(threading.Thread): def __init__(self,t ...
- Python自动化运维开发实战 二、Python基本用法
导语: Python编程博大精深,知识点众多,需要先整体上了解python的一些基本用法之后再去对每一个知识点细细研究,这样学习的速度会快很多.所以下面就先看一些python事先需要知道的基本知识. ...
- 寒假生活第一天——Github初体验
快开学了,今天体验了一下github这个对我来说很是神秘的东西 它的定义来源于百度百科,如有异议,那就有吧.//gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格 ...
- CKfinder for java详解二：缩略图及图片上传的缩放
我们找到 <thumbs><enabled>true</enabled><url>�SE_URL%_thumbs/</url><dir ...
- xm数据写入
reshape有两个参数: 其中,参数:cn为新的通道数,如果cn = 0,表示通道数不会改变. 参数rows为新的行数,如果rows = 0,表示行数不会改变. 注意:新的行*列必须与原来的行*列相 ...
- beebase
1.简单介绍 BeeBase是一个在线生物信息学数据库,显示与Apis mellifera.欧洲蜜蜂以及一些病原体和其他物种有关的数据.它是与蜜蜂基因组测序联盟合作开发的.BeeBase是蜜蜂研究社区 ...
- Linux系统服务之inetd
[Linux系统服务之inetd] inetd的角色是作为Telnet和FTP等与网络服务器相关的进程的“超级服务器”.这是一个简单的道理:并不是全部的服务器进程(包括那些接受新的Telnet和FTP ...
- 去掉Android新建项目的顶部标题
[ 去掉Android新建项目的顶部标题] 使用NoActionBar的Theme即可. 参考:http://blog.csdn.net/u012246458/article/details/5299 ...
- Centos 7 MariaDB Galera cluster 部署
一.安装环境准备 1.系统: CentOS Linux release 7.4.1708 (Core) 2.hosts 10.6.32.51 openstack1 10.6.32.52 opensta ...