JSFiddle - React, Tailwind, and code Playground

by Julien Wang

HTML

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="person in persons">
      {{ person }}
    </li>
    
    <button @click="change">change</button>
  </ul>
</div>

CSS

button {
  margin-top: 10px;
}

JavaScript

var app = new Vue({
	el: "#app",
  data: function (){
  	return {
    	persons: ["jack", "julien"]
    }
  },
  methods: {
  	change: function (){
    	this.persons = ["julien"];
    }
  }
})

document.querySelectorAll("li")[0].style.fontSize = "40px";