JSFiddle - React, Tailwind, and code Playground

by Seongkuk Park

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
      <h1>Input</h1>
      <form role="form">
        <div class="form-group">
          <div class="col-xs-8" style="padding-left: 0">
            <input class="form-control" id="ex1" type="text">
          </div>
          <div class="col-xs-2">
            <input class="form-control" id="ex2" type="number" min="1" max="100">
          </div>
          <div class="col-xs-2" style="padding-right: 0">
            <input class="form-control btn btn-default" value="Add Person" type="button" v-on:click="addList">
          </div>
        </div>
      </form>
      <br><br>
      <h1>People of Gaul</h1>
      <ul class="list-group">
        <li class="list-group-item" v-for="person in sort">
          {{ person.name }} {{ person.age }}
        </li>
      </ul>
      <h1>"Old" People of Gaul</h1>
      <ul class="list-group">
        <li class="list-group-item" v-for="person in oldSearch">
          {{ person.name }} {{ person.age }}
        </li>
      </ul>
      <pre>{{ $data }}</pre>
    </div>
    <br>

CSS

#app {
  margin: 0 auto;
  max-width: 768px;
  width: 100%;
}
li {
  overflow: hidden;
}
button {
  float: right;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    people: [
      {
        "name": "Obelix",
        "age": 33
      },
      {
        "name": "Asterix",
        "age": 32
      },
      {
        "name": "Majestix",
        "age": 82
      },
      {
        "name": "Methusalix",
        "age": 103
      },
      {
        "name": "Julius Caesar",
        "age": 66
      }
    ]
  },
  computed: {
    sort() {
      return this.people.sort((a, b) => {
        return b.age - a.age
      })
    },
    oldSearch() {
      return this.people.filter((person) => {
        if(person.age > 65) { return person }
      })
    }
  },
  methods: {
    addList() {
      let name = $('#ex1').val();
      let age = $('#ex2').val();

      if(name != '' && age != ''){
        this.people.push(
          {
            "name": $('#ex1').val(),
            "age": $('#ex2').val()
          }
        )
      }
    }
  }
})