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

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

フィルター

フィルターはテキストをフォーマットするためのもの
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')  
},  
})