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. ...
随机推荐
- Ajax与select标签的组合运用
---------------------------------------------------------------------------------------------------- ...
- JAVAWEB 一一 框架整合（SSH,Spring+Struts2+Hibernate IOC/DI AOP声明式事务处理 定时任务）
package org.springframework.orm.hibernate3; import java.io.Serializable; import java.util.List; impo ...
- 解决运行wamp提示“MSVCR110.dll”丢失的问题！
我在Windows系统上安装wampserver2.5 64位,安装到最后,总是提示丢失msvcr110.dll 解决办法: 到这个网站下载一个Visual C++ Redistributable f ...
- SSH 登录时出现如下错误：Disconnected:No supported authentication methods available
SSH 登录时出现如下错误:Disconnected:No supported authentication methods available 更新时间:2017-06-07 13:26:11 ...
- idea 热部署之JRebel安装-激活-简单使用(修改方法\配置文件均生效)
1.简介 JRebel插件在IntelliJ IDEA中用于代码的热部署,即工程在已经启动的状态下修改代码,可以不用再重启服务,JRebel插件会自动帮我们编译代码,然后重启.整个重启的过程耗时非常短 ...
- Android无法访问本地服务器（localhost/127.0.0.1）的解决方案
[Android无法访问本地服务器(localhost/127.0.0.1)的解决方案] 在Android开发中通过localhost或127.0.0.1访问本地服务器时,会报Java.NET.Con ...
- springboot 取消post数据大小限制
参考 https://blog.csdn.net/kkgbn/article/details/52088068 application.properties 添加 server.tomcat.max- ...
- Android笔记：intent
一.显式intent如下:(1)在intent构造函数传入两个activity文件名Intent intent = new Intent(FirstActivity.this, SecondActiv ...
- as3.0视频的快进有拖动条
package com{ import flash.display.MovieClip; import flash.events.MouseEvent; import fl.video.FLVPlay ...
- 第十章 优先级队列 (a1)需求与动机