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. ...
随机推荐
- 使用支持向量机(SVM) 算法进行分类
1 支持向量机(SVM)的基本概念 SVM是一种分类算法,其侧重于模式识别方面.使用SVM可以大大提高分类的准确性. 分类相当于模式识别的子集合,模式识别重点在于对已知数据进行特征发现与提取. ...
- 让一个非窗口组件(non-windowed component)可以接受来自Windows的消息
为什么要这样做? 有时候我们需要一个非窗口组件(比如一个非继承自TWinContrl的组件)可以接受Windows消息.要接受消息就需要一个窗口句柄,但是非窗口组件却没有句柄.这篇文章将讲述怎么让一个 ...
- editable : false与 readonly 的区别
editable : false 不能输入 readonly:不可操作,只能看
- unity 随笔
转载 慕容小匹夫 从游戏脚本语言说起,剖析Mono所搭建的脚本基础 深入浅出聊优化:从Draw Calls到GC 谁偷了我的热更新?Mono,JIT,IOS JS or C ...
- 二,Request和Response
概述 在DRF中,引入了一个Request和Response对象进行请求和响应,这两个对象分别继承于Djaong中常规的HttpRequest和SimpleTemplateResponse,相比其父类 ...
- AMQP协议与RabbitMQ、MQ消息队列的应用场景
什么是AMQP? 在异步通讯中,消息不会立刻到达接收方,而是被存放到一个容器中,当满足一定的条件之后,消息会被容器发送给接收方,这个容器即消息队列,而完成这个功能需要双方和容器以及其中的各个组件遵守统 ...
- SPSS-回归分析
回归分析(一元线性回归分析.多元线性回归分析.非线性回归分析.曲线估计.时间序列的曲线估计.含虚拟自变量的回归分析以及逻辑回归分析) 回归分析中,一般首先绘制自变量和因变量间的散点图,然后通过数据在散 ...
- css 书目录相关css+html代码
css: <style type="text/css"> #list{width:500px;position:absolute;left:50%;margin-lef ...
- 过滤access日志前5条数据
cat /usr/local/nginx/logs/access.log|awk '{print $1}'|sort|uniq -c|sort -n -r|head -5 找不到的话可以find查找a ...
- express返回html文件
[express返回html文件] app.engine(ext, callback) 方法即可创建一个你自己的模板引擎.其中,ext 指的是文件扩展名.callback 是模板引擎的主函数,接受文件 ...