Vueフィルタ使用
4944 ワード
1、フィルター
1.1フィルタ科は、二重カッコ補間とv-bind式の2つの場所で使用されます.フィルタはjs式の末尾に追加され、パイプシンボルで示されます.
1.1フィルタ科は、二重カッコ補間とv-bind式の2つの場所で使用されます.フィルタはjs式の末尾に追加され、パイプシンボルで示されます.
//
{{ message | capitalize }}
// v-bind
" rawId | formatId">div>
1.2
1.2.1
：
// 1：
// 2：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
1.2.2 Vueインスタンスを する にグローバルフィルタを する// 1：
// 2：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
フィルタをグローバルフィルタとして //
Vue.filter('my-filter', function (value) {
//
})
// getter，
var myFilter = Vue.filter('my-filter')
1.2.3フィルタ // message filterA ， filterA filterB
{{ message | filterA | filterB }}
1.2.4 のパラメータを するフィルタ// filterA ， message、arg1、arg2
{{ message | filterA(arg1, arg2) }}
1.3フィルタを し、ファイルに する
1.3.1フィルタを フォルダに き くlet dateServer = value => {
return value.replace( /(\d{4})(\d{2})(\d{2})/g , '$1-$2-$3' )
}
export { dateServer }
1.3.2コンポーネントjsにフィルタを するimport * as custom from './common/filters/custom'
// ， key value
Object.keys(custom).forEach(key => {
Vue.filter(key, custom[key])
})
1.3.3 Vueアセンブリでのフィルタの <template>
<section class="content">
<p>{{ time | dateServer }}p>
section>
template>
<script>
export default {
data () {
return {
time: 20160101
}
}
}
script>