vuejs绑定class和style样式


Posted in Javascript onApril 11, 2017

绑定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 会自动侦测并添加相应的前缀。

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

Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
vue监听滚动事件实现滚动监听
Apr 11 #Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
JS中IP地址与整数相互转换的实现代码
Apr 10 #Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 #Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
详解vue.js全局组件和局部组件
Apr 10 #Javascript
You might like
global.php
2006/12/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
一步步教你用Python实现2048小游戏
2017/01/19 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python argparse模块应用实例解析
2019/11/15 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python中无限循环需要什么条件
2020/05/27 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
初一科学教学反思
2014/01/27 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
读书小明星事迹材料
2014/05/03 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
竞选稿之小学班干部
2019/10/31 职场文书