JSFiddle - React, Tailwind, and code Playground

by gbkim1988

HTML

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

<div id="exercise">
    <!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->
    <div>
        <p>Current Value: {{ value }}</p>
        <button @click="value += 5">Add 5</button>
        <button @click="value += 1">Add 1</button>
        <p>{{ result }}</p>
    </div>
    <!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
    <div>
        <input type="text">
        <p>{{ value }}</p>
    </div>
    
    <div id="exercise2">
      <p>
      이번 튜토리얼은 간단한 링크의 경로를 변경하는 로직입니다. 
      아래와 같이 link 라는 데이터가 있다고 가정합니다. 
        <pre><code>
        data: { 
          link: 'http://google.com'
        }
        </code></pre>
        
      button 을 클릭 시 이 데이터를 apple.com 의 링크로 변경하도록 하겠습니다.
      </p>
      <hr>
      <button @click="changeLink">
      ChangeLink
      </button>
      <a :href="link">link</a>
    </div>
</div>

JavaScript

new Vue({
        el: '#exercise',
        data: {
            value: 0,
            // result: "not there yet"
            link: 'http://google.com',
        },
        computed: {
        	result: function(){
          	return this.value == 37 ?  "done":"not there yet";
          }
        },
        methods: {
        	changeLink(){
          	this.link = 'http://apple.com';
          }, 
        },
        watch: {
          // result value 를 관찰하고 37이 되면 result 의 값이 변하므로 watch 로직을 타게된다. 
          // 따라서, 이를 통해 computed.result 가 변하게되면 watch 에서 변화에 따른 로직을 실행할 수 있게됨이다.
        	result: function(newval){
          	var vm = this;
          	setTimeout(function() {
            	vm.value = 0;	
            }, 5000);
          }
        }
    });