Vue.jsを使ったフロントエンド開発 ( 2 )

vue.jsで methodsを追加

例えば、

index.html

<h2 v-on:click=”sayHello”>{{title}}</h2>

を追加

app.js

  methods: {

    sayHello: function(){

      alert(“Hello”);

    }

を追加することで、h2タグが付いたタイトルをクリックするとalertが表示される。

vue.jsを使ったリストの使い方

app.js

const colorsOfTheRainbow = [“red”, “orange”, “yellow”, “green”, “blue”, “indigo”, “violet”];

new Vue({
el: ‘#colors’,
data: {
rainbow: colorsOfTheRainbow
}
});

index.html

<div id=”colors”>
<ul>
<li v-for=”color in rainbow”>{{color}}</li>
</ul>
</div>

また、v-bind:style を追加して色などの属性を付加することもできる。

<div id=”colors”>
<ul>
<li v-bind:style=”{color:item}” v-for=”item in rainbow”>{{item}}</li>
</ul>
</div>

インデックスの追加も可能

<div id=”colors”>
<ul>
<li v-bind:style=”{color:item}” v-for=”(item, index) in rainbow”>{{index}} – {{item}}</li>
</ul>
</div>