目次
フィルター
正式アドレス: Filter - Vue.js (vuejs.org)
フィルターとは、Vue.js が データをフィルターするための { {}} 補間の最後にパイプ文字「(|)」を追加することをサポートしていることを意味します。
文字の大文字化、通貨における千の使用、カンマ区切り、変換時間など、テキストの書式設定によく使用されます。
HTMLの書き方：
二重中括弧内
{
{ name | chilema }}`v-bind`では2.1.0からサポートされています
<div v-bind:id="rawId | formatId"></div>フィルターを定義します。
フィルターを定義するには、filtersキーワードを使用します。
ここで定義されるフィルターはローカル フィルターであり、定義場所と使用場所が異なります。
コード例:
chilema メソッドの value パラメーターは、二重中括弧 | の左側の値です。
リターンが書かれていない場合、ブラウザには何も表示されないことに注意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|chilema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>ブラウザ出力:
グローバル フィルターを定義します。
グローバルフィルターはあまり使用されませんが、状況に応じて使用されます
コード例:
グローバルフィルタとローカルフィルタの名前が同じ場合は、ローカルフィルタが使用されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了吗"
})
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>ブラウザ出力:
フィルター連結:
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|chilema|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了吗"
})
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>説明する：
name の値はパラメータとして chilema に渡され、その後 chilema の結果が helema に渡されます。
表示されている最終フィルターは最後のフィルターです
ブラウザ出力:
パラメータを使用してフィルタリングします。
{
{ name | chilema('arg1', arg2) }}chilema には 3 つのパラメータがあり、名前が最初のパラメータ、通常の文字列が 'arg1' 2 番目のパラメータ、arg2式の値が 3 番目のパラメータになります。
Vue コード:
chilema(value,arg1,arg2){
return value+"，你吃了吗"
}タイムスタンプから時間まで
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{Mytime | zhuanhuanTime01}}
<br>
{
{Mytime | zhuanhuanTime02}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
Mytime:new Date()
}
},
filters:{
zhuanhuanTime01(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
},
zhuanhuanTime02(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'年'+M+'月'+D+'日 '+h+'时'+m+'分'+s+'秒';
}
}
});
</script>
</html>ブラウザ出力:
