JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<div id='app'>
  <ul>
    <li v-for='user in users'>{{user | reverse | upcase}}</li>
  </ul>
</div>

<div id='app2'>
  <ul>
    <li v-for='user in users'>{{user | reverse | upcase}}</li>
  </ul>
</div>

JavaScript

Vue.filter('upcase', (value) => {
  return value.toUpperCase();
});

new Vue({
  el: '#app',
  filters: {
    reverse (value) {
      return value.split('').reverse().join('');
    }
  },
  data: {
    users: ['Elvis Presley', 'Mickey Mouse', 'Lady Gaga']
  }
});

new Vue({
  el: '#app2',
  data: {
    users: ['Elvis Presley', 'Mickey Mouse', 'Lady Gaga']
  }
});