vue.js入門_04_条件分岐と繰り返し、イベント制御

by s9iwork

HTML

<div id="app">
  <h2>条件分岐：v-if、v-show(描画コストが低い)</h2>
  <p v-if="toggle">Hello v-if</p>
  <p v-show="toggle">Hello v-show</p>

  <h2>繰り返し：v-for</h2>
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
  <ul>
    <li v-for="value in user">{{ value }}</li>
  </ul>
  <ul>
    <li v-for="(value, key) in user">{{key}} : {{value}}</li>
  </ul>

  <h2>イベント制御：v-on</h2>
  <button v-on:click="onclick">Click</button>
  <p>{{ now }}</p>
</div>
 
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

CSS

h2 {
  font-size: 1rem;
}

JavaScript

// 3.v-if、v-show
var app = new Vue({
  el: '#app',
  data: {
    toggle: true,
    colors: ['Red', 'Green', 'Blue'],
    user: {
      firstName: 'Taro',
      lastName: 'Yamada',
      age: 28
    },
    now: ''
  },
  methods: {
    onclick: function(){
      this.now = new Date().toLocaleString();
    }
  }
})