<div class="container" id="app">

  <div class="row">
    <div class="col-xs-12">
      <span class="label label-primary">v-model</span> Basic Usage Handlers     
    </div>
    <div class="col-xs-12 form-inline">
      <label for="input1">Write something down:</label>
      <input id="input1" class="form-control" type="text" v-model="textInput1Content">
      &nbsp;<span>And the reverse is: {{ reverseTextInput1Content }}</span>
    </div>
    <div class="col-xs-12">
      Write some code below:
    </div>
    <div class="col-xs-6">
      <textarea class="col-xs-12 form-control" v-model="textareaContent"></textarea>
    </div>
    <div class="col-xs-6">
      <pre>{{ textareaContent }}</pre>
    </div>
    <div class="col-xs-12">
      <b>How to spell "🐕" in English ?</b>
    </div>
    <div class="col-xs-12">
      <input type="checkbox" id="letterO" value="O" v-model="dogLetters">
      <label for="letterO">O</label>
      <input type="checkbox" id="letterG" value="G" v-model="dogLetters">
      <label for="letterG">G</label>
      <input type="checkbox" id="letterD" value="D" v-model="dogLetters">
      <label for="letterD">D</label>
    </div>
    <div class="col-xs-12">{{ checkDogLetters() }}</div>
    <div class="col-xs-12">
      <b>Which fruit do you like ?</b>
    </div>
    <div class="col-xs-12">
      <select class="form-control" v-model="selectedFruits" multiple>
        <option value="Apple">🍎</option>
        <option value="Pear">🍐</option>
        <option value="Banana">🍌</option>
      </select>
    </div>
    <div class="col-xs-12">You like: {{ selectedFruits }}</div>
  </div>
  
  <div class="row">
    <div class="col-xs-12">
      <span class="label label-primary">v-model</span> Value Bindings     
    </div>
    
    <div class="col-xs-12">
      <label>Do you like my code ?</label>
      <input type="checkbox" v-model="toggleLike" v-bind:true-value="like" v-bind:false-value="dislike"> {{ toggleLike }}
    </div>
    
  </div>
  
  <div class="row">
    <div class="col-xs-12">
      <span class="label label-primary">v-model</span> Modifiers   
    </div>
    
    <div class="col-xs-12 form-inline">
      <label for="textInput2">You can't change the message until you press on enter:</label>&nbsp;
      <input class="form-control" id="textInput2" type="text" v-model.lazy="msg" >
      {{ msg }}
    </div>
    
    <div class="col-xs-12 form-inline">
      <label for="workdays">How many working days you have in a week?</label>
      <input class="form-control" id="workdays" v-model.number="workdays" type="number">
      {{ workdays }} day(s) (type: {{ typeOfWorkdays }})
    </div>
    
  </div>
  
  
</div>