目錄

• 過濾器filters獲取不oGiXLv到this物件
• 原理
• 下面舉個例子
• Vue filtehttp://www.cppcns.comrs this指向問題
• Vue例項中filter不依賴於當前vue例項上下文

vue過濾器filters獲取不到this物件

原理

• 在data中定義一個屬性that，把this儲存到that中
• 在呼叫filters中的方法sum的oGiXLv時候將that傳進去即可

下面舉個例子

用filters計算data中 a+b 的值

• 注意：filters中的sum方法的第一個引數是|左邊那個a，第二個引數才是括號寫的that

<template>
 <div>{{a|sum(that)}}</div>
</template>

<script>
 export default {
  name: "test",data() {
   return {
    that:oGiXLv
 
 this,a: 1,b: 2
   }
  },filters: {
   sum(a,that) {
    console.log(that);
    return a + that.b;
   }
  },}
</script>

Vue filters this指向問題

Vue例項中filter不依賴於當前vue例項上下文

所以在filter中無法直接訪問當前vue例項,所以可以使用computed替代。

可是當遇到需要根據html文字改變，v-for的資料等情況而改變時,computed的功能就無法滿足我們的需求了。

那我們就可以使用methods代替

data: {
  shopItemType: {}
},methods: {
 shopItemType2str(id){
    return this.shopItemType[id];
  }
}

<tr v-for="shopItem in shopItems">
 <td&http://www.cppcns.comgt;{{shopItemType2str(shopItem.item_type)}}</td>
</tr>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。