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 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
JavaScript实现区块链
Mar 14 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
jQuery - css() 方法示例详解
2014/01/16 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python3.6正式版新特性预览
2016/12/15 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python实现淘宝秒杀脚本
2020/06/23 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
财务会计应届生求职信
2013/11/24 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
市场营销计划书
2015/01/17 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
离婚案件原告代理词
2015/05/23 职场文书
离婚民事起诉状
2015/08/03 职场文书
任命书格式模板
2015/09/22 职场文书
七个Python必备的GUI库
2021/04/27 Python
彻底理解golang中什么是nil
2021/04/29 Golang
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis