JSFiddle - React, Tailwind, and code Playground

by realdev

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <button v-on:click="addTodo">추가</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  },
  methods: {
  	addTodo: function(){
    	this.todos.push({ text: 'New item' })
    }
  }
})