傳統寫法:
<h3 style=”color:blue;font-size:50px;”>文字</h3>
使用object 綁定寫法:
<h3 :style=”mystyleObj”>HI,文字</h3>
完整範例:
index.html
<div id=”myapp”>
<h3 :style=”mystyleObj”>HI,文字</h3>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
mystyleObj: {
color: ‘blue’,
FontSize: ’50px’
}
}
})
參考以下網址查看完整程式碼以及試試效果:
https://jsfiddle.net/YiruAtStudio/h16a5omp/3/
2-3.綁定:style array 寫法
傳統寫法:
<h3 style=”color:blue;font-size:50px;”>文字</h3>
綁定:style array 寫法
<h3 :style=”[mycolor,myfontSize]”>HI,文字</h3>
完整範例:
index.html
<div id=”myapp”>
<h3 :style=”[mycolor,myfontSize]”>HI,文字</h3>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
mycolor: {‘color’: ‘blue’},
myfontSize: {‘fontSize’: ’50px’}
}
})
參考以下網址查看完整程式碼以及試試效果:
https://jsfiddle.net/YiruAtStudio/c6yLfesq/3/
留言列表