vue.jsのディレクティブをまとめてみた。part2

v-for

jsのfor文

index.html

<div id="app">
      <ul>
          <li v-for="pref in prefs"><!--変数名 in　配列名-->
           {{pref.name }}   
          </li>
      </ul>     
    </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--vueのCDNを読み込む-->
<script>
   let app=new Vue({
        el:"#app",
        data:{
            prefs:[
                {name:'北海道'},
                {name:'青森県'},
                {name:'岩手県'},
                {name:'宮城県'},
                {name:'秋田県'},
                {name:'山形県'},
                {name:'福島県'},
            ]
        }
   });
</script>

上記にボタンを押すと、シャッフルできるようにしたい。
lodashというライブラリを使う。

index.html

<div id="app">
    <ul>
        <li v-for="pref in prefs"><!--変数名 in　配列名-->
            {{pref.name }}   
        </li>
    </ul>   
    <button v-on:click="shuffle">シャッフル</button>  
   
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--vueのCDNを読み込む-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.14/lodash.min.js"></script>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            prefs:[
                {name:'北海道'},
                {name:'青森県'},
                {name:'岩手県'},
                {name:'宮城県'},
                {name:'秋田県'},
                {name:'山形県'},
                {name:'福島県'},
            ]
        },
        methods:{
            shuffle:function(){
               this.prefs=_.shuffle(this.prefs); //_.はlodashを使うためのルール
            }

        }
    });　　//ボタンを押すとprefがシャッフルされるという処理になる。
</script>

v-on:click

addEventLintener('click',()=>{});に意味が似ている?クリックした後処理をする。

index.html

<div id="app"> 

 <p>{{now}}</p>
    <button v-on:click="time">現在時刻を表示する</button>
    </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
   let app=new Vue({
       el:"#app",
       data:{
           now:"00:00:00"
       },
       methods:{
           time:function(e){
               var date=new Date();

               this.now=date.getHours()+":"
               +date.getMinutes()+":"+
              　date.getSeconds();　　//現在時刻を表示
           }
       }
   });
</script>

part1
vue.jsのディレクティブをまとめてみました。part1