JSFiddle - React, Tailwind, and code Playground

by Wudiemperor

HTML

<script src="https://unpkg.com/vue"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuelearn</title>
    <style>
      .expand-transition {
        transition: all .3s ease;
        height: 30px;
        padding: 10px;
        background-color: #eee;
        overflow: hidden;
      }
      .expand-enter, .expand-leave {
        height: 0;
        padding: 0 10px;
        opacity: 0;
      }
      .trigle {
        display: inline-block;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 5px;
        border-bottom-color: #ff0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <component :is="currentView">
      </component>
      <button type="button" @click="switchTab">更改组件</button>
    </div>
    <script type="text/x-template" id="hello-world-template">
      <p>Hello hello hello</p>
    </script>
    <script>
    Vue.component('Akm', {
      template: '<div class="msg-list"><slot>This will only be displayed if there is no content to be distributed.</slot><p @click="am" class="clickme">what</p><span v-for="item in data">should i</span></div>',
      methods: {
        am: function () {
          alert(this.tm)
        }
      }
    })

    new Vue({
      el: '#app',
      data: {
        currentView: 'Ahome'
      },
      components: {
        Akm
      }
    })
      //   }
      // })
    </script>
  </body>
</html>