JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="app">
  <button v-on:click="add_click">追加</button>
  <button v-on:click="change_click">変更</button>
  <ul>
    <li v-for="num in numbers">{{num}}</li>
  </ul>
</div>

CSS

body { margin:3em }

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ],
  },
  methods: {
    add_click: function(event) {
        var newNumber = Math.floor(Math.random() * 100);
        this.numbers.push(newNumber);
    },
    change_click: function(event) {
        var index = Math.floor(Math.random() * this.numbers.length);
        var newNumber = Math.floor(Math.random() * 100);
        this.numbers[index] = newNumber;
    }
  },
});