introducingvmodel

by Adam McQuistan

HTML

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <label for="name">What is your name</label>
    <input id="name" type="text" v-model="textInput" />
    <span>Hello {{ textInput }}</span>
   </div>

   <h4>Which do you like better?</h4>
   <div v-for="choice in radioChoices" :key="choice">
     <label>{{ choice }}</label>
     <input name="fruit" type="radio" v-model="favoriteFruit" :value="choice"/>
   </div>
   <h4>So you like {{ favoriteFruit }}</h4>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
		textInput: '',
    radioChoices: ['apples', 'oranges'],
    favoriteFruit: ''
  }
})