JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1" class="app">
    {{ message }}
</div>

<div id="app2" class="app">
  <span v-bind:title="message">{{content}}</span>
</div>

<div id="app3" class="app" v-if="seen">
{{ message }}
</div>

CSS

.app{
  display:inline-block;
  background-color:rgba(0, 122, 122, 0.45);
  padding: 5px 9px;
  border-radius: 5px;
  color:#fff;
  margin-bottom: 10px;
}

JavaScript

var vm1 = new Vue({
		el:"#app1",
    data:{
    	message:"给我一个理由忘记！"
    }
});

delayDo(function(){
    vm1.message = "仿佛有痛楚！";
}, 3 *1000);

//-----------------------------------------------------------
var vm2 = new Vue({
		el:"#app2",
    data:{
    	message:"望月怀远",
      content:"望月怀远"
    }
});

delayDo(function(){
		vm2.content = "海上生明月";
}, 3 * 1000);

//-----------------------------------------------------------
var vm3 = new Vue({
		el:"#app3",
    data:{
    	seen:false,
      message:"天涯共此时"
    }
});

delayDo(function(){
		vm3.seen = true;
}, 3 * 1000)

//-----------------------------------------------------------

function delayDo(fun, delay)
{
	   var timeid = setTimeout(selfFun, delay);
     
     function selfFun()
     {
     		clearTimeout(timeid);
        fun();
     }
}