vue
五十九、vue中的样式绑定 -凯发ag旗舰厅登录网址下载
@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"><!-- 绑定js表达式，如果isactivated为true，那么activated的类名就会显示出来:class 对象语法--><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"><!-- 传递一个数组，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定。 --><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
我现在内心里的想法，就是希望你们接下来这一年不被虚度。这是你们人生中最美好时代中的一年，它不是拿来过渡、等待或者牺牲的。现在这一年才刚刚开始。
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的五十九、vue中的样式绑定的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：