标签：tle val inf har pat scale com info 对象
<!DOCTYPE html>
<html>
<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>Document</title>
</head>
<body>
<div id='app'>
<!-- : style 对象
{}中的key是style的css属性名font-size的js写法
{}中的value->data中的数据-->
<p :style="{color:a,fontSize:b}">内容</p>
<p :style="obj">啦啦</p>
<p :style="{color:c,backgroundColor:d}">蓝色的吗</p>
<p :style="objs">噢噢噢噢</p>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
obj: {
color: "blue",
fontSize: "10px"
},
a: "red",
b: "30px",
c: 'yellow',
d: 'green',
objs: {
fontSize: "50px",
color: "#ccc"
}
},
methods: {
}
});
</script>
-----------------11111111111111---------------------------
<div id="apps">
<p :style="obj">哈哈哈哈</p>
<h1 :style='obj'>aaaa</h1>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: "#apps",
data: {
obj: {
color: 'yellow',
fontSize: '30px',
backgroundColor: 'red'
}
}
})
</script>
</body>
</html>
03-基础-系统指令-v-bind-绑定 style-对象语法
标签：tle val inf har pat scale com info 对象
原文地址：https://www.cnblogs.com/divtab/p/10940215.html
