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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
vue组件添加事件@click.native操作
Oct 30 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
js常见表单应用技巧
2008/01/09 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python爬虫容易学吗
2020/06/02 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
2015年医药代表工作总结
2015/04/25 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
python异常中else的实例用法
2021/06/15 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js