03vue 過(guò)濾器,計(jì)算屬性

過(guò)濾器創(chuàng)建
  過(guò)濾器的本質(zhì) 是一個(gè)有參數(shù) 有返回值的方法
  new Vue({
    filters:{
      myCurrency:function(myInput){
        return 處理后的數(shù)據(jù)
      }
    }
  })
全局過(guò)濾器
注意事項(xiàng):

(1)全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過(guò)濾器,必須放在Vue實(shí)例化前面

(2) 過(guò)濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)。帶引號(hào)的參數(shù)視為字符串,而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算

(3)可以設(shè)置兩個(gè)過(guò)濾器參數(shù),前提是這兩個(gè)過(guò)濾器處理的不沖突

(4)用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理
例:
 <div id='itany'>
       <p>{{2|addZero}}</p>  
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.filter('addZero',function(data){
           if(data<10){
               return '0'+data;
           }else{
               return data;
           }
       }) 
       new Vue({
           el:'#itany'
       })
  
    </script>
局部過(guò)濾器
上面的例子直接注冊(cè)在Vue全局上面,其他不用這個(gè)過(guò)濾器的實(shí)例也會(huì)被迫接受,
其實(shí)過(guò)濾器可以注冊(cè)在實(shí)例內(nèi)部,僅在使用它的實(shí)例里面注冊(cè)

上面的程序改寫為:
例:
 <div id='itany'>
       <p>{{123.41233|number}}</p>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
            el:'#itany',
            filters:{
                number:function(data){
                    return data.toFixed(2)
                }
            }
       })
    </script>
計(jì)算屬性(...探索中)
模板內(nèi)的表達(dá)式非常便利,但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。
例1):
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
這里的表達(dá)式包含3個(gè)操作,并不是很清晰,所以遇到復(fù)雜邏輯時(shí)應(yīng)該使用Vue特帶的計(jì)算屬性computed來(lái)進(jìn)行處理。
例2):
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>  
//我們把復(fù)雜處理放在了計(jì)算屬性里面了
</div>
 var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 實(shí)例
            return this.message.split('').reverse().join('')
        }
    }
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容