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

v-if

qiita.html

<div id="app">
        <p v-if="error">エラーです</p>
    </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
let app=new Vue({
    el:"#app",
    data:{
        error:true//falseにすると画面に'エラーです'が表示されなくなる
    }
});
</script>

v-bind

{{}}マスタッシュ記号を、html属性の中に出力できないために使われる。

index.html

<div id="app">
        <p class="{{error_class}}">{{error_class}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
   let app=new Vue({
  el:"#app",
  data:{
      error_class:"error"
  }
});

この状態だと出力されない

そこでv-bindをつかう

index.html

 <div id="app">
        <p v-bind:class="error_class">エラーです</p>
        <img v-bind:src="img_src">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
   let app=new Vue({
  el:"#app",
  data:{
      error_class:"abc",
      img_src:"img01.png"
  }
});
    </script>

うまく出力されました

参考url
Vue.js入門 #03：if構文とディレクティブ
Vue.js入門 #04：Vue.jsによる属性の書き換え