詳解vue過濾器在v2.0版本用法
更新時間：2017年06月01日 09:51:06 作者：莎莉哇
本篇文章主要介紹了vue過濾器在v2.0版本用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1.x寫法
<body>
<div id="app">
{{html|uppercase}}
</div>
<script>
new Vue({
el:'#app',
data:{
msg:"123",
html:"abc"
}
})
</script>
</body>
但是2.0中已經廢棄了過濾器，需要我們自定義
<div id="app">
{{message|uppercase}}
</div>
//過濾器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
var vm = new Vue({
el:'#app',
data: {
message: 'test'
}
})
Vue.filter( id, [definition] )
參數：
{string} id
{Function} [definition]
用法：
注冊或獲取全局過濾器。
// 注冊
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter，返回已注冊的過濾器
var myFilter = Vue.filter('my-filter')
官方文檔參考：
http://cn.vuejs.org/v2/api/#filters
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了VUE?axios每次請求添加時間戳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導航欄的樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
el-select自定義指令實現觸底加載分頁請求options數據(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數據,下面給大家分享el-select自定義指令實現觸底加載分頁請求options數據(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02
路由是可以傳遞參數的，一般使用query進行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
這篇文章主要介紹了vue cli3 實現分環(huán)境打包的步驟，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
這篇文章主要介紹了這15個Vue指令,讓你的項目開發(fā)爽到爆，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue解決跨域問題，本文通過實例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇vue自定義全局共用函數詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
configureWebpack、chainWebpack配置vue.config.js方式
這篇文章主要介紹了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01