vue v-bind(style bindings)

20171227

by Syuan Shih

HTML

<div id="app">
    <ul class="menulist">
        <li><a href="#" :style="[colorStyle, fontSizeStyle]">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

JavaScript

var vm = new Vue({
    el: '#app',
    data: {
        colorStyle: { 'color': '#ff0000' },
        fontSizeStyle: { 'fontSize': '20px' }
    }
});