vue指令とフィルタの基本使用（ブランド管理ケース）

フィルターの基本使用
フィルタを定義

<div id="app">
  <p>{{ msg | msgFormat('  +1', '123') | test }}</p>
 </div>
//      Vue       ，     msgFormat
  Vue.filter('msgFormat', function (msg, arg, arg2) {
   //      replace   ，     ，            ，         
   return msg.replace(/  /g, arg + arg2)
  })

  Vue.filter('test', function (msg) {
   return msg + '========'
  })
  //    Vue   ，   ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '  ，          ，    ，    ，           '
   },
   methods: {}
  });

フィルターは複数使用可能・
以下のjsコードのHTML部分

<div id="app">
  <!-- {{1+1}} -->
  <div class="panel panel-primary">
   <div class="panel-heading">
    <h3 class="panel-title">    </h3>
   </div>
   <div class="panel-body form-inline">
    <label>
     Id:
     <input type="text" class="form-control" v-model="id">
    </label>
    <label>
     Name:
     <input type="text" class="form-control" v-model="name" @keyup.f2="add">
    </label>
    <!--  Vue ，        ，            ，       ，          -->
    <input type="button" value="  " class="btn btn-primary" @click="add()">
    <label>
            ：
     <!--   ： Vue      ，      ，   v-    -->
     <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
    </label>
   </div>
  </div>
  <table class="table table-bordered table-hover table-striped">
   <thead>
    <tr>
     <th>Id</th>
     <th>Name</th>
     <th>Ctime</th>
     <th>Operation</th>
    </tr>
   </thead>
   <tbody>
    <!--   ， v-for     ，      data   list         -->
    <!--   ，          search   ，  ，        ，       ，     search    -->
    <!--   search     ，      for   ，               ，          ，   -->
    <tr v-for="item in search(keywords)" :key="item.id">
     <td>{{ item.id }}</td>
     <td v-text="item.name"></td>
     <td>{{ item.ctime | dateFormat() }}</td>
     <td>
      <a href="" @click.prevent="del(item.id)">  </a>
     </td>
    </tr>
   </tbody>
  </table>
 </div>

プライベートフィルタとプライベートコマンドを定義します。

//              （  ）
  var vm2 = new Vue({
   el: '#app2',
   data: {
    dt: new Date()
   },
   methods: {},
   filters: { //                    【            】
    //         ，        ，                  ，             
    dateFormat: function (dateStr, pattern = '') {
     //           ，       
     var dt = new Date(dateStr)
     //  yyyy-mm-dd
     var y = dt.getFullYear()
     var m = (dt.getMonth() + 1).toString().padStart(2, '0')
     var d = dt.getDate().toString().padStart(2, '0')
     if (pattern.toLowerCase() === 'yyyy-mm-dd') {
      return `${y}-${m}-${d}`
     } else {
      var hh = dt.getHours().toString().padStart(2, '0')
      var mm = dt.getMinutes().toString().padStart(2, '0')
      var ss = dt.getSeconds().toString().padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
     }
    }
   },
   directives: { //        
    'fontweight': { //        
     bind: function (el, binding) {
      el.style.fontWeight = binding.value
     }
    },
    'fontsize': function (el, binding) { //   ：   function             bind   update   
     el.style.fontSize = parseInt(binding.value) + 'px'
    }
   }
  })
  //         
  // Vue.filter('      ', function(){})
  //       function ，     ，       ，                      
  /* Vue.filter('      ', function (data) {
   return data + '123'
  }) */

グローバルフィルタ

//       ，         
  //         ，     VM      
  Vue.filter('dateFormat', function (dateStr, pattern = "") {
   //           ，       
   var dt = new Date(dateStr)
   //  yyyy-mm-dd
   var y = dt.getFullYear()
   var m = dt.getMonth() + 1
   var d = dt.getDate()
   // return y + '-' + m + '-' + d
   if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`
   } else {
    var hh = dt.getHours()
    var mm = dt.getMinutes()
    var ss = dt.getSeconds()
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
   }
  })
//           
  Vue.config.keyCodes.f2 = 113
Vue.directive()        
 //   ：  1 ：      ，  ，      ，       ，     v-   , 
  //   ：       ，             v-        
  //   2：      ，      ，          ，            ，       
  Vue.directive('focus', {
   bind: function (el) { //              ，        bind   ，     
    //   ：        ，     ，    el ，              ，   el   ，      JS  
    //              ，        DOM  ，   ，   focus       
    //   ，    ，    DOM  ，      
    // el.focus()
   },
   inserted: function (el) { // inserted         DOM    ，    inserted   【  1 】
    el.focus()
    //  JS       ，    inserted     ，   JS     
   },
   updated: function (el) { //  VNode     ，    updated，        

   }
  })

フォント色のコマンドをカスタマイズします。

 //                 
  Vue.directive('color', {
   //   ，            ，                 ，               
   //              ，   ，               ，       
   bind: function (el, binding) {
    // el.style.color = 'red'
    // console.log(binding.name)
    //         ，       bind   
    // console.log(binding.value)
    // console.log(binding.expression)
    el.style.color = binding.value
   }
  })

締め括りをつける
以上は小编が皆さんに绍介したvue指令とフィルタの基本的な使用（ブランド管理ケース）です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。