vue.js入門_03_様々なデータを扱う

by s9iwork

HTML

<div id="app">
  <p>{{ message }}</p>
  <p>{{ count }}</p>
  <p>{{ user.prefecture }}</p>
  <p>{{ colors[1] }}</p>
  <input type="text" v-bind:value="user.lastName + user.firstName">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

CSS

#app {
  margin-bottom: 40px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js',
    count: 0,
    user: {
      lastName: 'Yamada',
      firstName: 'Taro',
      prefecture: 'Tokyo'
    },
    colors: ['Red', 'Green', 'Blue']
  }
})