快捷導(dǎo)航

詳解vue過(guò)濾器在v2.0版本用法

更新時(shí)間：2017年06月01日 09:51:06 作者：莎莉哇

本篇文章主要介紹了vue過(guò)濾器在v2.0版本用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.x寫法

<body>
<div id="app">
  {{html|uppercase}}
</div>
<script>
  new Vue({
    el:'#app',
    data:{
      msg:"123",
      html:"abc"
    }
  })
</script>
</body>

但是2.0中已經(jīng)廢棄了過(guò)濾器，需要我們自定義

<div id="app">
  {{message|uppercase}}
</div>

//過(guò)濾器
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] )

參數(shù)：

{string} id
{Function} [definition]

用法：

注冊(cè)或獲取全局過(guò)濾器。

// 注冊(cè)
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter，返回已注冊(cè)的過(guò)濾器
var myFilter = Vue.filter('my-filter')

官方文檔參考：

http://cn.vuejs.org/v2/api/#filters

http://cn.vuejs.org/v2/api/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue package.json文件的使用及說(shuō)明
`package.json`是Node.js和npm項(xiàng)目的核心配置文件,定義了項(xiàng)目的元數(shù)據(jù)和依賴項(xiàng),在Vue項(xiàng)目中,它管理依賴、提供腳本命令、存儲(chǔ)項(xiàng)目信息,并通過(guò)語(yǔ)義化版本控制確保項(xiàng)目穩(wěn)定
2025-01-01
解決axios發(fā)送post請(qǐng)求上傳文件到后端的問(wèn)題(multipart/form-data)
這篇文章主要介紹了如何使用axios發(fā)送post請(qǐng)求上傳文件到后端(multipart/form-data),本文給大家?guī)?lái)了問(wèn)題原因及解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-05-05
淺談vite和webpack的性能優(yōu)化和區(qū)別
本文主要介紹了淺談vite和webpack的區(qū)別，從性能優(yōu)化的幾個(gè)方便講解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue頁(yè)面更新patch的實(shí)現(xiàn)示例
這篇文章主要介紹了vue頁(yè)面更新patch的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接
這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接，Vue跨端渲染是一種基于Vue框架的跨平臺(tái)開(kāi)發(fā)技術(shù)，能夠?qū)崿F(xiàn)Web、iOS和Android三端的無(wú)縫銜接，提高開(kāi)發(fā)效率和用戶體驗(yàn)
2023-05-05
vuex存儲(chǔ)數(shù)組(新建，增，刪，更新)并存入localstorage定時(shí)刪除功能實(shí)現(xiàn)
這篇文章主要介紹了vuex存儲(chǔ)數(shù)組(新建，增，刪，更新)，并存入localstorage定時(shí)刪除,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue實(shí)現(xiàn)前端控制動(dòng)態(tài)路由的示例代碼
本文主要介紹了vue實(shí)現(xiàn)前端控制動(dòng)態(tài)路由的示例代碼,通過(guò)這些步驟,可以有效地根據(jù)用戶權(quán)限動(dòng)態(tài)渲染前端路由,實(shí)現(xiàn)多用戶權(quán)限系統(tǒng),感興趣的可以了解一下
2025-04-04
Vue實(shí)現(xiàn)返回頂部按鈕實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
學(xué)了vue寫項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載，感興趣的可以了解一下
2021-06-06
vue在項(xiàng)目中實(shí)現(xiàn)base64加密解密的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue在項(xiàng)目中實(shí)現(xiàn)base64加密解密的兩種方法,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解一下
2023-10-10