Vue

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue2-filters.min.js"></script>
  <div id="app">
    <div class="box">
      <input type="text" v-model="msg">
      <h2>capitalize</h2>
      <p>
      変換後：{{ msg | capitalize }}
      </p>
      <h2>uppercase</h2>
      <p>
      変換後：{{ msg | uppercase  }}
      </p>
      <h2>lowercase</h2>
      <p>
      変換後：{{ msg | lowercase }}
      </p>
      <h2>placeholder</h2>
      <p>
      変換後：{{ '' | placeholder('Text if msg is missing') }}
      </p>
      <h2>truncate</h2>
      <p>
      変換後：{{ msg | truncate(10) }}
      </p>
    </div>
    <div class="box">
      <input type="number" v-model="amount">
      <h2>currency</h2>
      <p>
      変換後：{{ amount  | currency }}
      </p>
    </div>
    <div class="box">
      <div class="box2">
        <h2>ordinal</h2>
        <p>
          <ul>
            <li v-for="c in mixNum">変換後：{{ c }}{{ c | ordinal }} </li>
          </ul>
        </p>
        <h2>limitBy</h2>
        <p>
          <ul>
            <li v-for="item in limitBy(arr, 2)">変換後：{{ item }}</li>
          </ul>
        </p>
        <h2>filterBy</h2>
        <p>
          <ul>
            <li v-for="item in filterBy(mixNum, 1)">変換後：{{ item }}</li>
          </ul>
        </p>
        <h2>find</h2>
        <p>
          <ul>
            <li v-for="item in find(mixNum, 1)">変換後：{{ item }}</li>
          </ul>
        </p>
        <h2>orderBy</h2>
        <p>
          <ul>
            <li v-for="item in orderBy(mixObj, 'no')">変換後：{{ item }}</li>
          </ul>
        </p>
       </div>
       <div class="box2">
         <pre>{{mixNum}}</pre>
         <pre>{{mixObj}}</pre>
       </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue2-filters.min.js"></script>

CSS

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
  margin-top: 25px;
}

pre {
  border: 1px solid #dcdcdc;
  padding: 10px;
}

.box {
  float:left;
  width:30%;
  min-width: 240px;
}

.box2 {
  float:left;
  width:45%;
}

Vue

const Vue2Filters = window.Vue2Filters;

let app = new Vue({
  el: '#app',
  mixins: [Vue2Filters.mixin],
  data: {
    msg: 'lorem ipsum dolor',
    amount : 12345,
    arr: ['item1','item2','item3','item4',],
    mixNum: [1,5,10,2,3,4,6],
    mixObj: [
      {no:1, text:'item1'},
      {no:5, text:'item5'},
      {no:4, text:'item4'},
      {no:10, text:'item10'},
      {no:3, text:'item3'},
      {no:2, text:'item2'}
    ],
  }
});