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 window对象属性整理
Oct 24 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
JS继承定义与使用方法简单示例
Feb 19 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
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
django用户登录验证的完整示例代码
2019/07/21 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python 公共方法汇总解析
2019/09/16 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python给list排序的简单方法
2020/12/10 Python
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
编写strcpy函数
2014/06/24 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
linux面试题参考答案(5)
2014/09/01 面试题
喷漆工的岗位职责
2014/03/17 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
感谢信的格式
2015/01/21 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL