詳解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中已經(jīng)廢棄了過濾器,需要我們自定義
<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] )
參數(shù):
{string} id
{Function} [definition]
用法:
注冊或獲取全局過濾器。
// 注冊 Vue.filter('my-filter', function (value) { // 返回處理后的值 }) // getter,返回已注冊的過濾器 var myFilter = Vue.filter('my-filter')
官方文檔參考:
http://cn.vuejs.org/v2/api/#filters
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08el-select自定義指令實(shí)現(xiàn)觸底加載分頁請求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實(shí)現(xiàn)觸底加載分頁請求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03這15個Vue指令,讓你的項(xiàng)目開發(fā)爽到爆
這篇文章主要介紹了這15個Vue指令,讓你的項(xiàng)目開發(fā)爽到爆,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-10-10configureWebpack、chainWebpack配置vue.config.js方式
這篇文章主要介紹了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01