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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
js中的this的指向问题详解
Aug 29 Javascript
vue实现tab栏点击高亮效果
Aug 19 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
财务会计专业推荐信
2013/11/30 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
毕业班工作总结
2015/08/10 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android