Binding Radio with Vue

Binding Radio with Vue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h2>
Binding Input Box
</h2>
<div id="app">
  <label class="badge badge-default">This is binded text -->{{text}}</label>
  <br>
  <input v-model="text">
</div>
<br>
<!-- App 2 -->
<div id="app1">
  <label class="badge badge-default">This is binded text with initialized value -->{{text}}</label>
  <br>
  <input v-model="text">
</div>
<hr>
<h2>
Binding Text Area
</h2>
<div id="app2">
  <p>{{text}}</p>
  <br>
  <textarea v-model="text"></textarea>
</div>
<hr>
<h2>Binding Checkboxes</h2>
<div id="app3">
  <input type="checkbox" id="checkbox" v-model="isChecked">
  <label for="checkbox">{{ isChecked }}</label>
</div>
<hr>
<h2>Binding Array of Checkboxes</h2>
<div id="app4">
  <input type="checkbox" id="jack" value="minors" v-model="isChecked">
  <label for="jack">5-17</label>
  <input type="checkbox" id="john" value="mid-age" v-model="isChecked">
  <label for="john">18-45</label>
  <input type="checkbox" id="mike" value="elders" v-model="isChecked">
  <label for="mike">46-65</label>
  <br>
  <span>Checked age group: {{ isChecked }}</span>
</div>
<hr>
<div id="app5">
  <h2>Binding Radio</h2>
  <input v-for="s in ['x','y']" type="radio" :value="s" name="a" v-model="selected">
   <input type="text" v-bin="bb">
  <br>
  <span>Picked: {{ selected }}</span>
</div>

<a href="http://thewebjuice.com/learn-fast-handling-user-inputs-form-bindings-using-vue">Visit The Web Juice for a Full Tutorial</a>

JavaScript

// Instantiating a new Vue instance
var app = new Vue({
  el: '#app',
  data: {
    text: ''
  }
});
// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
  el: '#app1',
  data: {
    text: 'Hello'
  }
});

var app2 = new Vue({
  el: '#app2',
  data: {
    text: ''
  }
});

var app3 = new Vue({
  el: '#app3',
  data: {
    isChecked: false
  }
});

var app4 = new Vue({
  el: '#app4',
  data: {
    isChecked: []
  }
});

var app5 = new Vue({
  el: '#app5',
  data: {
    selected: null,
    bb: "h"
  }
});