vue練習

vue練習

by techyankee

HTML

<div id="app">
  <input type="text" v-bind:value="message" />
  
  <p　v-if="toggle">v-ifを使ってみる</p>
  
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
  
  <ul>
    <li v-for="value in user">{{ value }}</li>
  </ul>
  <hr>
  <ul>
    <li v-for="(value, key) in user">
        {{ key}} : {{ value }}
    </li>
  </ul>

  <p>
  {{ message }}  
  </p>
  <p>
  {{ count }}  
  </p>
  <p>
  {{ user.prefecture }}  
  </p>
  <p>
  {{ colors[1] }}  
  </p>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript

var app = new Vue({
	
	el: '#app',
  
  data: {
  	toggle: true,
  
  	message: 'Hello Vue.js',
    count: 10,
    user: {
    	lastname: 'yamada',
      firstname: 'Taro',
      prefecture: 'Tokyo'
    },
    colors: ['Red', 'Green', 'Blue']
  }

})