详解Vue.js Class与Style绑定
Vue.js Class与Style绑定
对于数据绑定,一个常见的需求是操作元素的class列表和它的内联样式。因为它们都是attribute,我们可以用v-bind处理它们;只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind用于class和style时,Vue.js专门增强了它。表达式的结果类型除了字符串以外,还可以是对象或数组。
绑定HTML Class
对象语法
我们可以传给v-bind:class一个对象,以动态地切换class。注意,v-bind:class指令可以与普通的class特性共存。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" class="static" :class=" {'didi-orange': isRipe,'didi-green': isNotRipe}"></div> </body> <script> new Vue({ el: '#example', data: { isRipe: true, isNotRipe: false } }) </script> </html>
当isRipe和isNotRipe变化时,class列表将相应地更新。例如,如果isNotRipe变为true,那么class列表将变为“static didi-orange didi-green”。
注:尽管可以用Mustache标签绑定class,比如class="{{className}}",但是我们不推荐这种写法和v-bind:class混用。
我们也可以直接绑定数据中的一个对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :class="ddfe"></div> </body> <script> new Vue({ el: '#example', data: { ddfe: { isRipe: true, isNotRipe: false } } }) </script> </html>
还可以在这里绑定一个返回对象的计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :class="ddfe"></div> </body> <script> new Vue({ el: '#example', data: { didiAge: 4, didiMember: 6000 }, computed: { ddfe: function () { return { 'didi-orange': this.didiAge > 3, 'didi-large': this.didiMember > 1000 } } } }) </script> </html>
数组语法
我们可以把一个数组传给v-bind:class,以应用一个class列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :class="[didiHandsome,didiBeautful]"></div> </body> <script> new Vue({ el: '#example', data: { didiHandsome: 'didiHandsome', didiBeautful: 'didiBeautful' } }) </script> </html>
绑定内联样式
对象语法
v-bind:style的对象语法十分直观——看着非常像CSS,其实它是一个JavaScript对象。CSS属性名可以用驼峰式或短横分隔命名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :style="{ color: didiColor, fontSize: fontSize + 'px' }"></div> </body> <script> new Vue({ el: '#example', data: { didiColor: 'orange', fontSize: 30 } }) </script> </html>
通常直接绑定到一个样式对象更好,让模板更清晰。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :style="ddfe"></div> </body> <script> new Vue({ el: '#example', data: { ddfe: { color: 'orange', fontSize: '13px' } } }) </script> </html>
同样的,对象语法常常结合返回对象的计算属性使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" :style="ddfe"></div> </body> <script> new Vue({ el: '#example', data: { didiAge: 4, didiMember: 6000 }, computed: { ddfe: function () { return { color: this.didiAge>3 ? 'orange': 'green', fontSize: this.didiMember>1000 ? '20px': '10px' } } } }) </script> </html>
数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上。
<div id="example" :style="[ ddfe, didiFamily]"></div>
自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
主流浏览器引擎前缀:
webkit
(谷歌,Safari,新版Opera浏览器,以及几乎所有iOS系统中的浏览器(包括 iOS 系统中的火狐浏览器);基本上所有基于WebKit 内核的浏览器)moz
(火狐浏览器)o
(旧版Opera浏览器)ms
(IE浏览器 和 Edge浏览器)
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/shi_zi_183/article/details/122457493
相关文章
PHP Fatal error: Cannot use object of type stdClass as array in错误
下面一起来看看在php开发中碰到PHP Fatal error: Cannot use object of type stdClass as array in错误问题的解决办法吧。 普通的数组出现如下错误 代码...2016-11-25- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
idea 无法创建Scala class 选项的原因分析及解决办法汇总
这篇文章主要介绍了idea 无法创建Scala class 选项的解决办法汇总,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-02- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
浅析Swift中struct与class的区别(汇编角度底层分析)
这篇文章主要介绍了Swift中struct与class的区别 ,本文从汇编角度分析struct与class的区别,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30- 这篇文章主要介绍了前端JavaScript中的class,类是用于创建对象的模板,JavaScript中的Class更多的还是语法糖,本质上绕不开原型链,下面就来看看关于JavaScript class类的详细内容吧...2021-10-22
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
- 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下...2016-10-03
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了jquery采用oop模式class类的使用方法,结合实例形式分析了jQuery模拟oop模式定义class类与方法的技巧,需要的朋友可以参考下...2016-01-24
- 这篇文章主要给大家介绍了关于Swift中static和class关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Java具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-30
- 第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
- 这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02