Vue.js講義記録4

今日からまたぽつぽつと。
昨日はひたすらに眠くて寝てしまった。
疲れるとだめだね、何事も。

v-ifメソッド

<div id="app">
    <p v-if="value > 20"> up to 20</p>
    <p v-else-if="value > 10"> up to 10</p>
    <p v-else>under 10</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: 10
    }
})
</script>

htmlタグの中でif文を使うことができる。
タグの中に条件式を直で書いて、その内容を表示する。
組み合わせに寄っては、
より動的にパラメータによって切り替えるという芸当もできそうだ。

v-showメソッド

<div id="app">
    <p v-show="value">value is true</p>
    <p v-show="!value">value is false</p>

    <button v-on:click="value = !value"></button>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: true
    }
})
</script>

クリックごとで要素の表示非表示を切り替えたりする場合はv-showを使う。
使い方を覚えれば簡単である。

v-forメソッド

<div id="app">
   <tbody>
   <tr v-for="worker is workers">
       <td>{{worker.name}}</td>
       <td>{{worker.title}}</td>
    </tr>

    <tr v-for="(worker,index) is workers">
       <td>{{worker.name}}</td>
       <td>{{worker.title}}</td>
       <td>{{index}}</td>
    </tr>
   </tbody>
</div>

<script>
new Vue({
    el:'#app',
    workers:{
        {name:'attu',title:'tester' },
        {name:'worker1',title:'tester2'}
    }
})
</script>

v-forで項目の繰り返しができる。
こういうことができるようになると、ほぼテンプレートエンジンの感がしてくる。
indexやpropertyNameをセットで引数に指定すれば、
indexの数字や項目名も取れる。
めちゃめちゃ便利に感じるぞ、これは。

次回からは中身を少し簡略化していく。
繰り返しの注意事項になるけれど、
詳細は講座を見てほしい。あまり出しすぎても講座の人に失礼だしね。