JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
<ol>
  <li class="sese" v-bind:title="say(todo.text)" v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>

<div id="app2">
  <div class="sese btn" v-on:click="reverseMsg"> 点我点我点我 </div>
  <span>{{mengru}}</span>
</div>

CSS

.sese{
  background-color:rgba(0, 188, 188, 0.6);
  padding: 4px 8px;
  display:inline-block;
  list-style:none;
  color:#fff;
  border-radius:4px;
  margin-right:5px;
}

.btn{
   background-color:rgba(188, 0, 188, 0.6);
   cursor:pointer;
   margin-left:40px;
}

JavaScript

var vm1 = new Vue({
		el:"#app1",
    data:{
    	todos:[]
    },
    mounted:function(){
    	this.$nextTick(function(){
      		this.todos = [
          	{text:"海上生明月"},
            {text:"天涯共此时"},
            {text:"情人怨遥夜"},
            {text:"竟夕起相思"}
          ]
      });
    },
    methods:{
    	say:function(value){
      	console.log(value);
      	return " - " + value;
      }
    }
});

var vm2 = new Vue({
		el:"#app2",
    data:{
    		mengru:"梦茹"
    },
    methods:{
    		reverseMsg:function(){
        		this.mengru = this.mengru.split("").reverse().join('');
        }
    }
});