JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
  <ol>
    <v-temp1 v-bind:user="userinfo"></v-temp1>
    <v-temp2 v-for="city in citys" v-bind:city="city"></v-temp2>
  </ol>
</div>

JavaScript

// 模板的使用
Vue.component("v-temp1", {
  "props": ["user"],
  "template": "<li>{{user.nickname}}</li>"
});
let vm1 = new Vue({
  el: "#app1",
  data: {
    userinfo: {
      nickname: "七月羽歌",
      gender: "男",
      age: 32
    },
    citys: [{
      name: "上海"
    }, {
      name: "深圳"
    }, {
      name: "佛山"
    }, {
      name: "南宁"
    }]
  },
  components: {
    "v-temp2": {
      "props": ["city"],
      "template": "<li>{{city.name}}</li>"
    }
  }
});