Vue.2.0.5实现Class 与 Style 绑定的实例


Posted in Javascript onJune 20, 2017

Class 与 Style 绑定

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

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存。如下模板:

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

如下 data:

data: {
 isActive: true,
 hasError: false
}

渲染为:

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

当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError的值为 true , class列表将变为 "static active text-danger"。

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

<div v-bind:class="classObject"></div>
data: {
 classObject: {
  active: true,
  'text-danger': false
 }
}

渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:

<div v-bind:class="classObject"></div>
data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
  return {
   active: this.isActive && !this.error,
   'text-danger': this.error && this.error.type === 'fatal',
  }
 }
}

数组语法

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

<div v-bind:class="[activeClass, errorClass]">
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

渲染为:

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

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

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass ,但是只有在 isActive 是 true 时添加 activeClass 。

不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法:

<div v-bind:class="[{ active: isActive }, errorClass]">

With Components

This section assumes knowledge ofVue Components. Feel free to skip it and come back later.

When you use the class attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it:

<my-component class="baz boo"></my-component>

The rendered HTML will be:

<p class="foo bar baz boo">Hi</p>

The same is true for class bindings:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is truthy, the rendered HTML will be:

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

绑定内联样式

对象语法

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="[baseStyles, overridingStyles]">

自动添加前缀

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

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

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
bootstrap css样式之表单
Jan 19 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
JS中的三个循环小结
Jun 20 #Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php下实现折线图效果的代码
2007/04/28 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python实现线程池代码分享
2015/06/21 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python里 super类的工作原理详解
2019/06/19 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
基于Python测试程序是否有错误
2020/05/16 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
上海微创软件面试题
2012/06/14 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS