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. ...
随机推荐
- python3进行汉字和unicode码的转换
输出某个unicode码对应的汉字和某个汉字对应的unicode编码. # -*- coding=UTF-8 -*- str1 = "\u6000"#某个汉字的unicode码 s ...
- CSS----学习2
CSS2属性 文本 1 水平对齐方式 text-align:left/right/center 也可以让img.input等有水平方向的对齐方式 2 垂直对齐方式 vertical-align:top ...
- cxf 例子
使用 CXF 做 webservice 简单例子 Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这 ...
- linux基本之一
1.目录棉集 / 根目录,理论上讲系统中的一切都属于他. /bin 存放所有用户都能执行的命令(二进制) /boot 存放启动文件/内核的相关文件,一般独立成为一个分区. /dev 存放物理设备的目录 ...
- css-background-image 背景图片太大或太小
.zoomImage { background-image:url(images/yuantiao.jpg); background-rep ...
- hbase 调试各种报错
1.master is initializing 怎么都不知道怎么回事,直接从hbase 2.0 换到了 hbase 2.1 2.java.lang.ClassNotFoundException: o ...
- skinned mesh render
[skinned mesh render] 相比MeshRender组件 ,SkinnedMeshRender多了bones组件.所以很明显,MeshRender不支持骨骼动画,而SkinnnedMe ...
- appium的内存泄露问题
appium的一个内存泄露的问题 标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...
- scrapy 异步存储mysql
1.在setting中设置MySQL连接信息 HOST='101.201.70.139'MYSQL_DBNAME='anttest'MYSQL_PASSWORD='Myjr678!@#'MYSQL_U ...
- C library:<cctype>(ctype.h)
1, isalnum(): check whether c is either a decimal digit or an uppercase or lowercase letter. 2, isal ...