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>
  <button v-on:click="reverseMessage">글자 뒤집기</button>
  <button @click="changeState">조건문 바뀌기</button>
  <p v-for="( post, index ) in posts">
    {{ index+1 }}. {{ post.title }}<br/>
    {{ post.contents }}
  </p>
  <p v-bind:class="isColor?'red':''">이건 빨간색</p>
  <p :class="isColor?'blue':''">이건 파란색</p>
  <button @click="changeColor">색을 바꿔보자</button>
</div>

CSS

p.red {
  color: red;
}
p.blue {
  color: blue;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    trueMessage: 'this is true!',
    falseMessage: 'this is false!',
    isCondition: true,
    isColor: true,
		posts: [
    	{
    		title: '제목1',
        contents: '내용1'
    	},
      {
    		title: '제목2',
        contents: '내용2'
    	},
      {
    		title: '제목3',
        contents: '내용3'
    	},
      {
    		title: '제목4',
        contents: '내용4'
    	}
     ]
  },
  methods: {
  	changeColor: function () {
    	this.isColor = !this.isColor;
    },
	  changeState: function () {
    	this.isCondition = !this.isCondition;
    },
		reverseMessage: function () {
      this.trueMessage = this.trueMessage.split('').reverse().join('');
      this.falseMessage = this.falseMessage.split('').reverse().join('');
    }
  }
})

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