Vue.js computed(算出プロパティ)の使い方

vue create vueapp
cd vueapp

## bootstrapインストール
npm i -S bootstrap-vue

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="hello container-fluid"> 
    <div class="mx-auto col-md-6">
      <b-button v-on:click="showTime()">{{text}}</b-button>
      <div v-if="show">
        <b-alert show>Computed（変化なし） <p v-text="timeComputed"></p></b-alert>
        <b-alert variant="success" show>Method（変化する）<p v-text="timeMethod()"></p></b-alert>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: true,
      text: "非表示"
    }
  },
  props: {
    msg: String
  },
  methods: {
    timeMethod: function() {
      return Date.now();
    },
    showTime(){
      this.show=!this.show
      if(this.show){
        this.text="非表示"
      }
      else{
        this.text="表示"
      }
    }
  },
  computed: {
    timeComputed: function() {
      return Date.now();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>