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>

<div id="app4" class="app">
{{ message }}
<input v-model="message" type="text" />
</div>

<p></p>

<div id="app5" class="app">
<ol>
<todo-item v-for="item in list" v-bind:todo="item">
  
</todo-item>
</ol>
</div>
<p></p>

<div id="app6" class="app">
{{message}}
<p></p>
{{reverseMessage}}
</div>

<p></p>
<div id="app7" class="app">
{{message}}
<p></p>
{{reverseMessage()}}
</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);

//-----------------------------------------------------------
var vm4 = new Vue({
		el:"#app4",
    data:{
    	message:"么有花香，没有树高。"
    }
})
delayDo(function(){
	vm4.message = "我是一个无人知道的小草";
}, 2 * 1000);

//-----------------------------------------------------------
Vue.component("todo-item",{
	props:["todo"],
  template:"<li v-bind:name='todo.id'>{{todo.text}}</li>"
});

var vm5 = new Vue({
		el:"#app5",
    data:{
    	list:[{id:1, text:"如果没如果"},
      			{id:2, text:"当你"},
            {id:3, text:"独立  "}]
    }
})

//-----------------------------------------------------------
var vm6 = new Vue({
	el:"#app6",
  data:{
  		message:"Hi,my name is vini"
  },
  computed:{
  	reverseMessage:function(){
    		return this.message.split("").reverse().join("");
    }
  }
});

delayDo(function(){
	vm6.message = "可惜没如果";
}, 4 * 1000);

//-----------------------------------------------------------
var vm7 = new Vue({
		el:"#app7",
    data:{
    		message:"君生我未生，我生君已老"
    },
    methods:{
    		reverseMessage:function(){
        		return this.message.split("").reverse().join("");
        }
    }
});

delayDo(function(){
	vm7.message = "给我一个理由忘记";
}, 4 * 1000);

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