<div id="app">
<p v-bind:class="messageStyle">Hello Vue.js!</p>
<button v-on:click="changeClass()">
class属性を変更する
</button>
</div>
html {
font-family: sans-serif;
background-color: #f2f2f2;
}
p {
font-weight: 700;
font-size: 3em;
}
.before { color: #4DC295; }
.after { color: #445C71; }
var vm = new Vue({
el: '#app',
data: {
messageStyle: 'before',
},
methods: {
changeClass: function() {
this.messageStyle = 'after';
}
},
});
Also see: Tab Triggers