vue中通过属性绑定为元素绑定style行内样式
目录
一、使用内联样式
二、代码
一、使用内联样式：
1.直接在元素上通过( :style]的形式，书写样式对象。
<h1 :style="{color: 'red' , 'font-size' : '40px'}">这是一个善良的H1</h1>
2.将样式对象，定义到data中，并直接引用到 :style中
在data上定义样式：
data: {
h1StyleObj: { color: 'red' , 'font-size' : '40px ' , 'font-weight ' : '280’}
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3.在 :style中通过数组，引用多个data上的样式对
在data上定义样式:
data: {
h1styleObj: { color: 'red', 'font-size' : '40px ' , 'font-weight ': '280’},
h1styleObj2: { fontStyle: 'italic' }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中:
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
二、代码：
<head>
<meta charset="UPr-8">
<meta name="viewport" content="width=device-width，I nitial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=" . /lib/vue-2.4.0.js"></script>
</head>
<body>
<div id=”app”>
<!--对象就是无序键值对的集合-->
<!--<h1 style=”styleObj1”>这是一个h1<h1>
</div>-->
<h1 style=”[ styleObj1, styleObj2 ]”>这是一个h1<h1>
</div>-->
<script>
//创建vue 实例，得到ViewMode1
var vm= new vue ({
el: ‘#app’,
data: {
styleObj1:{ color:’red’, ‘fond-weight’: 200},
styleObj2:{ ‘font-style’: ‘italic’ }
},
methods: {}
｝）；
</script>
</body>
输出结果：
