当前位置：凯发k8官方网 > 前端技术 > vue >内容正文

vue

五十九、vue中的样式绑定 -凯发k8官方网

发布时间：2024/10/8 vue 30 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了五十九、vue中的样式绑定小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen

@date：2020/10/16

大四是一个焦虑的时期。烦恼有时候是具体问题带来的压力，有时候却是无端的、莫名其妙的，有时候还极易受到外界的影响，别人一句话就会激起内心难以遏制的波澜。

大四我的目标弃算法，转前端。要求在一个多月提升自己的前端能力。

文章目录

绑定class
- 对象语法
- 数组语法
绑定内联样式

今天加深vue的学习，主要学习vue中的样式绑定。其中

在数据绑定中，最常见就是动态绑定元素的 class 或内联样式 style 咯，它们也是 html 的属性，所以可以使用 v-bind 指令。

对象语法

第1种使用方式：对象语法

传递一个js表达式，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定。

下面实现点击hello world，字体颜色就变化的点击事件

<head><meta charset="utf-8"><title>document</title><style>.activated{color: red;}</style> </head> <body><div id="app"><div @click="handledivclick":class="{activated:isactivated}">hello world</div></div><script>var vm = new vue({el : "#app",data:{isactivated:false},methods: {handledivclick:function(){this.isactivated = !this.isactivated}},})</script> </body>

数组语法

第2种使用方式：数组语法

传递一个js表达式，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定。

<head><meta charset="utf-8"><title>vue中的样式绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.activated{color: red;}</style> </head> <body><div id="app"><div @click="handledivclick":class="[activated]">hello world</div></div><script>var vm = new vue({el : "#app",data:{activated:""},methods: {handledivclick:function(){// if (this.activated === ""){// this.activated = "activated"// }else{// this.activated = ""// }// 三元运算符this.activated = this.activated === "" ? "activated" : ""}},})</script> </body>

1、第一种：通过对象如:style="styleobj"

<body><div id="app"><div :style="styleobj" @click="handledivclick">hello world</div></div><script>var vm = new vue({el: "#app",data:{styleobj:{// 对象styleobj color:"black"}},methods: {handledivclick:function(){this.styleobj.color = this.styleobj.color === "black" ? "red" : "black"}},})</script> </body>

第二种：通过数组如:style="[ styleobj , {fontsize: '20px'}]"

<body><div id="app"><div :style="[styleobj, {fontsize:'20px'}]" @click="handledivclick">hello world</div></div><script>var vm = new vue({el: "#app",data:{styleobj:{// 对象styleobj color:"black"}},methods: {handledivclick:function(){this.styleobj.color = this.styleobj.color === "black" ? "red" : "black"}},})</script> </body>

参考

官方文档：https://cn.vuejs.org/v2/guide/class-and-style.html
https://mp.weixin.qq.com/s/p_clyjwrw2f6alnfyofg0g
慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发：https://coding.imooc.com/learn/list/203.html

我现在内心里的想法，就是希望你们接下来这一年不被虚度。这是你们人生中最美好时代中的一年，它不是拿来过渡、等待或者牺牲的。现在这一年才刚刚开始。

总结

以上是凯发k8官方网为你收集整理的五十九、vue中的样式绑定的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。