vue中的两种样式使用方式：
class样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.red{
color:red;
}
.thin{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 class="red thin">{{msg}}</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
}
})
</script>
</body>
</html>
显示效果为：
内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--对象是无序键值对集合-->
<h1 :style="{color:'green','font-weight':200}">{{msg}}</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
}
})
</script>
</body>
</html>
显示效果：
内联样式也可以通过数组引入样式对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--对象是无序键值对集合-->
<h1 :style="[style1,style2]">{{msg}}</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test',
style1:{color:'red','font-size':'40px','font-weight':'200'},
style2:{'font-style':'italic'}
}
})
</script>
</body>
</html>
显示效果：
