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. ...
随机推荐
- Idea使用Maven异常 --- Maven网络代理设置
在conf/setting.xml和m2/repository/setting.xml中加入: <proxies> <!-- proxy | Specification for on ...
- Visual studio 2019 preview & C# 8 initial experience
Visual studio 2019 preview & C# 8 initial experience using System; using static System.Con ...
- (转)关闭win10的Skype
https://blog.csdn.net/qq_38285661/article/details/86663849 使用win10的小伙伴们,有没有发现一个不用的功能Skype,假如你想卸载又怕卸不 ...
- 实现了一下Mp3播放器的功能
实现了一下Mp3播放器的功能 简单的实现了一下Mp3播放器的功能,见面比较的不美好,讲 究看一下就好了. 主要功能: 1.显示文件列表,主要参照了一位前辈的代码,谢咯. 2.可以实现播放开始,暂停. ...
- Oracle数据库操作总是显示运行中无法成功，删除表时报错 resource busy and acquire with NOWAIT specified
1.直接运行以下语句: select t2.username,t2.sid,t2.serial#,t2.logon_timefrom v$locked_object t1,v$session t2wh ...
- MongoDB应用场景
数据记录如下 /* 1 */ { "_id" : ObjectId("5b56dd19a171d7e9bfb03ac1"), "name" ...
- platform_device module
参考: http://www.wowotech.net/linux_kenrel/platform_device.html 1. platform_device 需要在注册 platform_driv ...
- jquery 中attr()的一个用法
html 如下: <ul><li><img src="./img/addface_icon.png" alt="">< ...
- cakePHP模型内置回调函数afterFind()的使用。
在用find获取数据后,我们要对所获取到的数据做一些处理,这时,直接在模型层覆盖cakephp内置的回调函数,使用find时会自动调用. 其中$baomings 就是find 到的 $this-> ...
- js中函数的 this、arguments 、caller，call()，apply()，bind()
在函数内部有两个特殊的对象,arguments 和 this,还有一个函数对象的属性caller. arguments对象 arguments是一个类似数组的对象,包含着传入函数的所有参数. func ...