JSFiddle - React, Tailwind, and code Playground

by junseok choi

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p v-if="isCondition">{{ trueMessage }}</p>
  <p v-else>{{ falseMessage }}</p>
  <p v-for="( post, index ) in posts">
    {{ index+1 }}. {{ post.title }}<br/>
    {{ post.contents }}
  </p>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    trueMessage: 'this is true!',
    falseMessage: 'this is false!',
    isCondition: true,
		posts: [
    	{
    		title: '제목1',
        contents: '내용1'
    	},
      {
    		title: '제목2',
        contents: '내용2'
    	},
      {
    		title: '제목3',
        contents: '내용3'
    	},
      {
    		title: '제목4',
        contents: '내용4'
    	}
     ]
  }
})

app.isCondition = false;
app.posts.push({title: '내맘대로', contents: '내용또한 내맘대로'})