之前的html文件如何去绑定css样式?
01.首先在html文件中,在<head>
标签中,用<style>
中去写样式,通过html标签(每一个标签都有这样子的属性)中的class或者是id属性来完成<style>
中的描绘的样式的用。
例子:
先去写样式<style>
,.basic就是用class选择器(此处的意思是class属性值是basic),id选择器是#
同时用多个样式,就是一起用,只是用空格来隔开。
这个是传统的在html文件中用css样式。
那么如何在vue中去绑定样式?
用class或者id来获取样式:
01.首先css样式还是要去写的,也就是还需要在头部标签head中去写,这边不改变。
02.在vue实例中的data中key值去写字段。这里的字段就是<style>
中的写的class类选择器的名字。例如:data中的自定义的key 值是(mood)
03.在html标签中去用v-bind来绑定mood字段
04.此外可以用一个事件来完成样式名称的改变。
class属性的进一步的优化(数组包装,对象包装),这里的修改字段在浏览器中去完成的。
结果:
用标签的style属性来完成
之前的html文件中标签用style属性,直接写样式。
例如:
在vue中,由于style是一个内部存在多个键值对的一个属性。一般就把style的许多字段写在一个对象(在data中)。
多个style