Vue.js 绑定内联样式
2019-08-02 本文已影响0人
Rinaloving
这是本人学习《Vue.js实战》 (梁灏) 的笔记，并非原创，只是套着书本实际敲了一遍书中的代码，特此说明。
使用 v-bind:style（即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定内联样式</title>
</head>
<body>
<div id="app">
<div :style="{ 'color':color, 'fontSize': fontSize + 'px' }">文本</div>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
color:'red',
fontSize:14
}
})
</script>
</body>
</html>
内联样式一.png
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般卸载data或computed里，以data 为例改写上面的示例：
<div id="app2">
<div :style="styles">文本</div>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app2',
data:{
styles:{
color:'gold',
fontSize:14 + 'px'
}
}
})
</script>
内联样式二.png
<!--应用多个样式对象时，可以使用数组语法：-->
<div style="[ styleA, styleB ]"></div>
