vue.js入门教程之绑定class和style样式


Posted in Javascript onSeptember 02, 2016

一、前言

相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

二、绑定 HTML Class

请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}" ,但是我们不推荐这种写法和 v-bind: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>

当 isA 和 isB 变化时,class 列表将相应地更新。例如,如果 isB 变为 true,class 列表将变为 "static class-a class-b"。

你也可以直接绑定数据里的一个对象:

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

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

数组语法

我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:

<div v-bind:class="[classA, classB]">
data: {
 classA: 'class-a',
 classB: 'class-b'
}

渲染为:

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

如果你也想根据条件切换列表中的 class,可以用三元表达式:

<div v-bind:class="[classA, isB ? classB : '']">

此例始终添加 classA,但是只有在 isB 是 true 时添加 classB 。

二、绑定内联样式

对象语法

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 的数组语法可以将多个样式对象应用到一个元素上:

<div v-bind:style="[styleObjectA, styleObjectB]">

自动添加前缀

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

四、总结

以上就是为大家整理的vue.js绑定class和style样式的全部内容,文章介绍的很详细,具有一定的参考学习价值,希望对大家学习vue.js能有所帮助,小编还会陆续更新关于vue.js的信息,感兴趣的朋友们请继续关注三水点靠木。

Javascript 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
创建与框架无关的JavaScript插件
Dec 01 Javascript
js绘制购物车抛物线动画
Nov 18 #Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 #Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 #Javascript
node.js中module.exports与exports用法上的区别
Sep 02 #Javascript
AngularJs Scope详解及示例代码
Sep 01 #Javascript
AngularJs Modules详解及示例代码
Sep 01 #Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
8个PHP数组面试题
2015/06/23 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
使用python实现knn算法
2017/12/20 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python按比例随机切分数据的实现
2019/07/11 Python
python定时截屏实现
2020/11/02 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
白酒业务员岗位职责
2013/12/27 职场文书
学生周末长期请假条
2014/02/15 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
个人授权委托书模板
2014/09/14 职场文书
党员个人剖析材料
2014/09/30 职场文书
高中历史教学反思
2016/02/19 职场文书
员工升职自我评价
2019/03/26 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书