JSFiddle - React, Tailwind, and code Playground

by euledge

HTML

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>vue</title>
  </head>
  <style>
    .list {
      width: 800px;
      display: grid;
      grid-template-columns: repeat(3, 266px);
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .list_item {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      list-style: none;
      padding: 100px 30px;
      margin: 0;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }

  </style>

  <body>

    <div id="app">

      <h4>Vue</h4>

      <ul class="list">
        <li class="list_item" v-for="(item) in items" @click="clickScroll(); test()">
          {{ item.title }}
        </li>
      </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [{
              title: 'タイトル：あああああああああ'
            },
            {
              title: 'タイトル：いいいいいいいいいい'
            },
            {
              title: 'タイトル：ううううううううう'
            },
            {
              title: 'タイトル：えええええええ'
            },
            {
              title: 'タイトル：おおおおおお'
            },
            {
              title: 'タイトル：かかかかかかかかかか'
            },
            {
              title: 'タイトル：きききききききききき'
            },
            {
              title: 'タイトル：くくくくくくくく'
            },
            {
              title: 'タイトル：けけけけけけけ'
            },
            {
              title: 'タイトル：ここここここここ'
            },
            {
              title: 'タイトル：さささささささ'
            },
            {
              title: 'タイトル：しししししし'
            },
            {
              title: 'タイトル：すすすすす'
            },
            {
              title: 'タイトル：せせせせ'
            },
            {
              title: 'タイトル：そそそそ'
            },
     ...