Vue样式绑定
class：
1、三目运算 字符串
2、数组
3、对象
4、数组里是对象
行内样式：
- 直接在元素上通过 :style 的形式，书写样式对象
- 将样式对象，定义到 data 中，并直接引用到 :style 中
a) 在data上定义样式
b) 在元素中，通过属性绑定的形式，将样式对象应用到元素中
- 在 :style 中通过数组，引用多个 data 上的样式对象
a) 在data上定义样式
b) 在元素中，通过属性绑定的形式，将样式对象应用到元素中.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>style样式的使用</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<!-- 插值表达式，可以读取我们的变量 -->
<!-- !!!键如果包含-的话，我们必须要加上引号 -->
<div :style="{'font-size':'32px'}">{{message}}</div>
<div :style="textStyle">{{message}}</div>
<div :style="[textStyle,textStyle2]">{{message}}</div>
<div :style="getStyle(2)">{{message}}</div>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
textStyle: {
color: 'red',
'font-size': '50px'
},
textStyle2: {
'font-weight': '600'
}
},
methods: {
getStyle(num) {
let obj = {
color: 'red',
'font-size': '50px'
};
if (num == 1) {
obj.color = 'red'
} else {
obj.color = 'green'
}
return obj
}
},
})
</script>
</body>
</html>
