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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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中创建和调用webservice接口示例
2014/07/25 PHP
php生成圆角图片的方法
2015/04/07 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Django 路由系统URLconf的使用
2018/10/11 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
python math模块的基本使用教程
2021/01/16 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
上海期货面试题
2014/01/31 面试题
为什么要做架构设计
2015/07/08 面试题
领班岗位职责范文
2014/02/06 职场文书
出生公证书样本
2014/04/04 职场文书
活动倡议书范文
2014/05/13 职场文书
环保小标语
2014/06/13 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技