<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.static{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 静态写法 -->
<h1 class="static" style="background-color: green;">{{msg}}</h1>
<!-- 字符串形式 -->
<h1 class="static" :style="mStyle">{{msg}}</h1>
<!-- 对象形式 -->
<!-- 凡是带减号的去掉换成驼峰 -->
<h1 class="static" :style="{backgroundColor: 'green'}">{{msg}}</h1>
<!-- 定义对象的方式 -->
<h1 class="static" :style="styleObj">{{msg}}</h1>
<!-- 数组形式 -->
<h1 class="static" v-bind:style="styleArray">{{msg}}</h1>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
mStyle : "background-color: gray;",
styleObj : {backgroundColor: 'red'},
styleArray : [
{backgroundColor : 'green'},
{color : 'red'}
]
}
});
</script>
</body>
</html>
- 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.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.