Vue 样式绑定的实现方法


Posted in Javascript onJanuary 15, 2019

学习 Vue 的时候觉得样式绑定很简单,但是使用的时候总是容易搞晕自己。因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的。这篇文章就简单对 Vue 绑定做个总结。

操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue做了专门增强,表达式结果类型除了字符串之外,还可是对象或数组。

  • Class绑定
  • Style绑定

绑定Class

对象语法

data 里的属性是负责 toggle 是否要这个 class,也就是一般定义 Boolean 类型的值。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

这里用 isActive 和 hasError 定义是否需要 active 和 text-danger 类。

data: {
 isActive: true,
 hasError: false
}

渲染为

<div class="active"></div>

数组语法

data 里负责定义 CSS 类名。

<div :class="[activeClass, errorClass]"></div>

这里定义了 activeClass 和 errorClass 的 CSS 类名是 active 和 text-danger。

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

渲染为

<div class="active text-danger"></div>

混合写法

可以用混合的形式来绑定 class,即数组语法里写对象语法。所以 data 里的数据主要用于:

  1. 是否需要某个 class
  2. 定义 "class" 里面的类名
<div :class="[{ active: isActive }, errorClass]"></div>

这里定义了 errorClass 的 CSS 类名为 text-danger,并用 isActive 定义是否需要 active 类。

data: {
 errorClass: 'text-danger',
 isActive: true
}

渲染为

<div class="active text-danger"></div>

绑定Style

对象语法

data 里的属性是定义 style 里的值。与 class 不一样,class 是定义是否要这个 class的。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

这里定义了 style 里的 color 和 font-size 的值。

data: {
 activeColor: 'red',
 fontSize: 30
}

渲染为

<div style="color: red; font-size: 30px"></div>

数组语法

可以绑定多个样式对象到 style 上

<div :style="[baseStyles, overridingStyles]"></div>

这里在 data 里用 styleObject 定义了 color 和 font-size,再用 overridingStyles 定义了 background 和 margin。然后在组件里用数组进行混合绑定。

data: {
 styleObject: {
  color: 'red',
  fontSize: '13px'
 },
 overridingStyles: {
  background: 'green',
  margin: '13px'
 }
}

渲染为

<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
JavaScript中的几种继承方法示例
Dec 06 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python Flask框架扩展操作示例
2019/05/03 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python实现tail -f 功能
2020/01/17 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
婚礼答谢礼品
2015/01/20 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers