Vue model

by tmhr1850

HTML

<div id="app">
  <ul>
    <li v-for="(val,key, index) in user">{{index}}  {{ key }}:  {{ val }}</li>
  </ul>
  <ul>
    <li v-for="color in colors"> {{ color }}</li>
  </ul>
  <p>
    {{ count }}
  </p>
  <p>
    {{ message }}
  </p>
  <input type="button" v-on:click="clickFun" value="クリックしてください">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

JavaScript

const app = new Vue({
	el: "#app",
  data: {
  	message: "Hello Vue.js",
    baseColor: "red",
    active: false,
    count: 0,
    user: {
      	last: 'yamada',
        first: 'taro',
        age: 20
      },
      colors: ['Red', 'Green', 'Blue']
  },
  methods: {
  	clickFun() {
    		this.count += 1
    }
  }
})