五十九、Vue中的样式绑定
【摘要】 @Author：Runsen
@Date：2020/10/16
大四是一个焦虑的时期。烦恼有时候是具体问题带来的压力，有时候却是无端的、莫名其妙的，有时候还极易受到外界的影响，别人一句话就会激起内心难以遏制的波澜。
大四我的目标弃算法，转前端。要求在一个多月提升自己的前端能力。
文章目录
绑定Class对象语法数组语法
绑定内联样式
今天加深V...
@Author：Runsen
@Date：2020/10/16
大四是一个焦虑的时期。烦恼有时候是具体问题带来的压力，有时候却是无端的、莫名其妙的，有时候还极易受到外界的影响，别人一句话就会激起内心难以遏制的波澜。
大四我的目标弃算法，转前端。要求在一个多月提升自己的前端能力。
今天加深Vue的学习，主要学习Vue中的样式绑定。其中
绑定Class
在数据绑定中，最常见就是动态绑定元素的 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
数组语法
第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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
绑定内联样式
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
第二种： 通过数组 如: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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
参考
- 官方文档：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
我现在内心里的想法，就是希望你们接下来这一年不被虚度。这是你们人生中最美好时代中的一年，它不是拿来过渡、等待或者牺牲的。现在这一年才刚刚开始。
文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。
原文链接：maoli.blog.csdn.net/article/details/109110499
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）