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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
JS实现滑动导航效果
Jan 14 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php基础教程
2015/08/26 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python实现KNN近邻算法
2020/12/30 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
培训演讲稿范文
2014/01/12 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
运动会通讯稿200字
2015/07/20 职场文书
自荐信大全
2019/03/21 职场文书