Vue基礎 在模板中使用過濾器

2022-03-03 09:37:28 字數 1369 閱讀 8020

vue 測試版本:vue.js v2.5.13

官網給了過濾器的兩種使用方式:

1、你可以在乙個元件的選項中定義本地的過濾器:

結合例項,我給兩個**:

<

div

id>

<

input

type

="text"

v-model

="id"

placeholder

="please enter your id"

/>

<

p>your id is: }

p>

div>

window.onload = function

() ,

filters:

},});

};

2、在建立 vue 例項之前全域性定義過濾器:

方式 2 換一種 js 就行,html 不用變:

window.onload = function

() );

newvue(,

});};

比較好理解,但是我覺得可以完善下,因為上面都沒有用模板;

如果用了模板,第一種就失效了,只有第二種可行:

<

div

id>

<

my-ele

:id="id"

>

my-ele

>

div>

window.onload = function

() }

`, props: ['id']

});vue.filter('formatid', function

(v) );

new

vue(

});};

雖然 開發環境下 會報錯,但不影響功能,

如果把 js 換成第一種,就會失敗:

window.onload = function

() }

`, props: ['id']

});newvue(,

filters:

}});

};

功能失效;

如果採用 render() 函式,就更複雜了些,詳情戳 vue-雙向繫結:從 html 到 模板 到 渲染函式

在vue專案中使用過濾器

1 在src目錄下utils資料夾裡新建乙個filter.js檔案 處理遊戲用時顯示格式 如1分20秒 1 20 let formattime value else 在元件中直接呼叫即可,如 export default在main.js檔案中全域性註冊過濾器 import filter from u...

Vue專案中使用過濾器

為什麼要使用過濾器?能夠對資料進行各種過濾處理,返回需要的結果,非常的方便和快捷。怎麼使用過濾器?首先過濾器分為兩類 全域性過濾器 區域性過濾器 例如 vue.filter filterdome function val 全域性過濾器的在專案中的使用 一般我們會在在src下面建乙個資料夾,用來放我們...

使用過濾器

過濾器在資料從作用域傳遞到指令上時進行轉換,但並不改變源資料,這允許在檢視中顯示時能夠靈活地格式化或者轉換資料。angularjs具有兩種型別的內建過濾器 一類是對單個資料進行操作的,另一類是對資料集合進行操作的。用於單個資料的內建過濾器 currency 對貨幣值進行格式化,在過濾器名之後新增冒號...