v-ifの条件式で比較演算子（＝＝）を使いたいメモ

すごい簡単なことだが、
Vue.jsのv-ifの条件式で比較演算子（＝＝）を使用したいと思ったところ、
公式を見てもわかりにくかったのでメモ。

コードを見れば一発

<template>
  <div>
    <button v-if="this.id == 1">新規作成</button>
  </div>
</template>

<script>
export default {
  name: "TestBtn",
  data: function(){
    return {
      id: 1
    }
  },
};
</script>

※コードは一部抜粋

vi-ifの中で条件式を書けばいいだけ。
権限が１なら、新規作成ができるみたいなイメージ。

これだけじゃ、味気ないので、
ボタンをクリックしたら、idを変更して、
新規作成ボタンが非表示になることも確認。

<template>
  <div>
    <button v-if="this.id == 1" v-on:click="changeId">新規作成</button>
  </div>
</template>

<script>
export default {
  name: "TestBtn",
  data: function(){
    return {
      id: 1
    }
  },
  methods: {
    changeRoleId: function() {
      this.id = 2;
    }
  }
};
</script>

リアクティブに動いていることを確認できました〜