イベントハンドリング v-on new Vue({ el: "#app", data: { counter: 0 }, methods: { clickHnadler: function() { this.counter++ } } }) <div id="app"> <p> {{ counter }} </p> <button v-on:click="clickHnadler"> click </button> </div> クリックするたびにカウントが増える https://jsfiddle.net/hiroki1205/938nqps6/28/ 引…

Vue.jsの条件分岐について if 他に言語のifの書き方とほぼ同じ new Vue({ el: "#app", data: { color: "red" } }) <div id="app"> <p v-if="color === 'red'"> stop </p> <p v-else-if="color === 'yellow'"> Caution </p> <p v-else-if="color === 'blue'"> Go </p> <p v-else> Not anything </p> </div> --> redと表示 v-showとの違い v-showは要素のcssのdis…

クラスとスタイルのバインディング クラスやスタイルをデータバインディングすることで動的な見た目を作ることが出来ます。 クラスデータバインディングのきほん .large { font-size: 30px; } .text-danger { color: red; } new Vue({ el: "#app", data: { i…