JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app1">
  <item-1 v-bind:todo="todo"></item-1>

  <item-2 v-for="item in list" v-bind:todo="item"></item-2>
</div>

JavaScript

Vue.component(
  "item-1", {
    props: ["todo"],
    template: "<div>{{todo}}</div>"
  })

new Vue({
  el: "#app1",
  data: {
    todo: "花谢花飞花满天",
    list: [{
      name: 'vini',
      age: 32,
      gender: '男'
    }, {
      name: '瘦了瘦',
      age: 26,
      gender: '女'
    }]
  },
  components:{
  	'item-2':{
    	props:['todo'],
      template:"<li>{{todo.name}}</li>"
    }
  }
});

<!-- test -->