BETA

Vue.jsのフィルターとミックスイン

投稿日:2020-01-26
最終更新:2020-01-26

フィルターとミックスイン

フィルター

フィルターはテキストをフォーマットするためのもの
computed は引数を取れない
this は使えない

// グローバル登録  
Vue.filter('upperCase', value => value.toUpperCase())  

// ローカル登録  
filters: {  
LowerCase(value) {  
  return value.toLowerCase()  
},  
},  

// 呼び出す  
<h2>{{ title | upperCase }}</h2>  
<h2>{{ subTitle | upperCase }}</h2>  

// 複数つなぐこともできる  
<h2>{{ title | lowerCase | upperCase }}</h2>  

少しでも変わるとfilerが呼ばれる、関数と同じ
できるだけcomputed を使う

ミックスイン

// countNumber.js  
export const tokyoNumber = {  
data() {  
return {  
  title: 'Welcome to Tokyo',  
  subTitle: 'Tokyo is a great city',  
  number: 0,  
}  
},  
filters: {  
lowerCase(value) {  
  return value.toLowerCase()  
},  
},  
}  

// Home.vue  
import { tokyoNumber } from '@/tokyoNumber'  

export default {  
mixins: [tokyoNumber],  
}  

// グローバル登録  
// 全てのインスタンスで呼ばれる  
// ので、普通は使わない  
Vue.mixin({  
created() {  
console.log('global mixin')  
},  
})  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう