1.对象语法
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- blue和20px必须加单引号,否则会按照变量进行解析 -->
<h2 v-bind:style="{color:'blue',fontSize:'20px' }">我是标题</h2>
<!-- activeColor和activeSize是当作变量进行解析的 -->
<h2 v-bind:style="{color:activeColor,fontSize: activeSize + 'px' }">我是标题</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
activeColor:'red',
activeSize:40
}
})
</script>
</html>
注意:
1.属性名后的值加引号时,属性值会直接对元素进行渲染
2.属性名后的值不加引号时,属性值会当作变量进行解析
最终效果如图所示:
2.数组语法
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-bind:style="[baseStyles,overridingStyles]">我是标题</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
baseStyles:{color:'red',fontSize:'50px'},
overridingStyles:{background:'yellow',border:'1px solid #eeeeee'}
}
})
</script>
</html>
最终效果如图所示: