VUE學習04--VUE字符串過濾器的使用

由於後端對字符串的處理特別多，在學習前端時又發現了VUE有一個過濾器的功能，我們可以通過自定義過濾器來對字符串進行處理。下面我們來學習一下字符串過濾器的使用。

首先我們來說一下用法：

正常顯示一個數據我們會這樣 {{message}} 

在使用過濾器就像linux中命令的管道符一樣，用 | 進行過濾。{{message | filters1 | filters2 | .....}}

然後filters定義在<scripts>標籤內，與data，method等內容平級。下面請看代碼示例。

<template>
  <div id="app">
    <input  v-model="message">
    <br>
    <!--字符串過濾器的使用-->
    <br> //反轉數組
    <div v-bind:class="{active:flag}">{{message|reverse}}</div>
    <br> //首字母大寫
    <div v-bind:class="{active:flag}">{{message|toUpperFirst}}</div>
    <br>


  </div>
</template>

<script>
export default {
  data(){
    return {
      message:"",
      flag:true
    }
  },
  filters :{
    toUpperFirst:function(value){
      if(!value) return '' //如果爲空則返回空字符串
      value = value.toString() //將obj對象轉成字符串類型
      // charAt表示拿到對應索引位置的字符，toUpperCase是將傳入的字符轉成大寫，slice是按照傳入索引截取字符串的一部分    
      return value.charAt(0).toUpperCase() + value.slice(1)  
    },
    reverse: function (value){
      if(!value) return ''
      value = value.toString()
      // split方法用來將字符串拆成字符數組， reverse用來反轉字符數組， join方法用來將字符數組轉成字符串
      return value.split('').reverse().join('')
    }
  }
}
</script>

<style lang="scss">
  .active {
    width: 145px;
    height: 20px;
    background: grey;
  }
  </style>

 

喜歡的朋友歡迎點贊，評論，關注哦~~