2. Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
activeColor:"green",
fontSize:20
}
})
</script>
</body>
</html>
运行结果：
上述代码中，我们通过v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'设置的div的字体颜色和字体大小。
我们也可以将div的样式绑定在一个样式对象上，这样看起来会更清晰
下面通过绑定样式对象实现和上个例子一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObj">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
styleObj:{
color:"green",
fontSize:"20px"
}
}
})
</script>
</body>
</html>
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles,overridingStyles]">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
baseStyles:{
color:"green",
fontSize:"20px"
},
overridingStyles:{
"background-color":"yellow"
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
