data: { isA: true, isB: false}渲染结果:
当前位置:首页 > 日记 > 正文

vuejs绑定class和style样式

vuejs绑定class和style样式

绑定Html Class

我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存:

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>data: { isA: true, isB: false}

渲染结果:

<div class="static class-a"></div>

你也可以直接绑定数据里的一个对象,结果与上面的一致:

<div v-bind:class="classObject"></div>data: {classObject: { 'class-a': true, 'class-b': false}}

绑定内联样式

v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {activeColor: 'red',fontSize: 30}

直接绑定到对象上(让模板更清晰)

<div v-bind:style="styleObject"></div>data: {styleObject: {color: 'red',fontSize: '13px'}}

备注:当 v-bind:style使用需要厂商前缀的 CSS 属性时如 transform,Vue.js 会自动侦测并添加相应的前缀。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

excel2003规划求解的教程

excel2003规划求解的教程

教程,电脑软件,  Excel中如何操作规划求解呢?下面是小编带来的关于excel2003规划求解的教程,希望阅读过后对你有所启发!excel2003规划求解的教程:  规划求解步骤1:首先我们来讲一下EXCEL里面内置的单变量求解。规划求解步骤2:为了方便操作,…

Photoshop给人像服装更换成有个性

Photoshop给人像服装更换成有个性

有个性,人像,图案,电脑软件,Photoshop,衣服增加布纹的方法有很多,作者介绍的方法非常实用。直接把衣服单独抠出,并用想要的布纹剪贴到原衣服上;后期把原衣服的褶皱还原到布纹上,再调整颜色和光影等,得到想要的效果,下面就为大家介绍Photoshop给人…

angularjs定时任务的设置与清除示

angularjs定时任务的设置与清除示

清除,定时任务,设置,示例,电脑软件,人们似乎常常将AngularJS中的$timeOut() $interval()函数看做是一个内置的、无须在意的函数。但是,如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的…

INdesign CS6怎么制作渐变色? ID渐

INdesign CS6怎么制作渐变色? ID渐

图形,渐变,渐变色,制作方法,电脑软件,INdesign中想要制作一个渐变的图形,该怎么制作渐变色呢?下面我们就来看看详细的教程。软件名称:Adobe InDesign CS6 中文免费版软件大小:878.42MB更新时间:2014-05-261、打开一个ID文档,现在我要在这个文档添…

怎么在excel2013中对多个数据进行

怎么在excel2013中对多个数据进行

数据,方法,多个,中对,电脑软件,  Excel作为办公人员常用的软件之一,获得了世界范围的推广和使用。Excel软件依靠其强大的功能,成为一款快速、有效处理函数和公式的优秀软件,下面小编就教你怎么在excel2013中对多个数据进行汇总。希望对你…

JS中Safari浏览器中的Date

JS中Safari浏览器中的Date

浏览,器中,电脑软件,JS,Safari,在js中处理Date时,发现Safari和其他浏览器的支持方式不一致1.例如:2017-01-01 12:00:00在其他浏览器中,使用这个格式的字符串进行new Date操作没有问题,但是在Safari中会提示Invalid Date;Safari中不支持'-…

ppt怎么复制幻灯片不保留原格式

ppt怎么复制幻灯片不保留原格式

文本,格式,幻灯片,技巧,电脑软件,  在网上复制的文本经常会带有格式,一般文本都自带格式有时候不一定能用上,那么如何在ppt里如何粘贴无格式的文本呢?下面给大家分享ppt复制无格式文本的技巧,希望看完本教程的朋友都能学会并运用起来。ppt复…

ps双曲线磨皮教程:保留皮肤质感磨

ps双曲线磨皮教程:保留皮肤质感磨

祛痘,教程,双曲线,质感,电脑软件,版权申明:本文原创作者&ldquo;詹小哥的詹&rdquo;,感谢&ldquo;詹小哥的詹&rdquo;的原创经验分享!ps双曲线磨皮教程:保留美女人像皮肤质感磨皮并祛斑祛痘,我们都知道PS磨皮的方法多种多样,但是在商业修片当中,首选…

PPT2010怎么设置艺术字位置

PPT2010怎么设置艺术字位置

位置,设置,方法,艺术字,电脑软件,  文字在PPT制作中不可或缺的要素,你可能会认为字体设置很简单,但小编要告诉你这里面有很大学问。文字的字体、大小、排列都影响着PPT的制作,然而字体太多,你需要掌握几种字体来适应不同的ppt。下面小编就与…

Photoshop创意合成在空中飞行的旅

Photoshop创意合成在空中飞行的旅

创意,航班,海报,在空中,电脑软件,这篇教程是向的朋友分享Photoshop创意合成在空中飞行的旅游航班海报方法,教程合成出来的海报非常漂亮,教程介绍的很详细,推荐过来,一起来看看吧!12 阅读全文教程结束,以上Photoshop创意合成在空中飞行的旅游航班…

详述 Sublime Text 打开 GBK 格式

详述 Sublime Text 打开 GBK 格式

解决方法,中文乱码,格式,电脑软件,Sublime,Sublime Text 是一个代码编辑器,其具有漂亮的用户界面和强大的功能,例如代码缩略图,Python 的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python …

JS全角与半角转化实例 | 分享

JS全角与半角转化实例 | 分享

全角,分享,半角,实例,电脑软件,最近在做PC端网站的页面的一个表单校验,需要把全角输入转化成半角符号。之前没有了解过这些编码的知识,还是得Google一下查查资料,故简单总结一下。什么是全角、半角传统上,英语或拉丁字母语言使用的电脑系统,每一…