<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 20px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<!--
v-bind:style 的对象语法十分直观——看着非常像 CSS ，
其实它是一个 JavaScript 对象。
CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
-->
<div id="demo1" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">字体颜色 字号</div>
<div id="demo2" v-bind:style="styleObject">直接绑定一个样式对象，让模版更清晰</div>
<!--v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：-->
<div v-bind:style="[baseStyles, overridingStyles]">
<!--
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
-->
<script>
var demo1 =new Vue({
el:'#demo1',
data:{
activeColor:'red',
fontSize:30
}
})
var demo2 =new Vue({
el:'#demo2',
data:{
styleObject:{
color:'red',
fontSize:'30px'
}
}
})
</script>
</body>
</html>