Table des matières
filtre
Adresse officielle : Filtre - Vue.js (vuejs.org)
Filtre signifie que Vue.js prend en charge l'ajout d'un caractère barre verticale "(|)" à la fin de l'interpolation { {}} pour filtrer les données.
Souvent utilisé pour formater du texte, comme la majuscule des lettres, l'utilisation de milliers de devises, la séparation par des virgules, le temps de conversion, etc.
Écriture HTML :
entre doubles accolades
{
{ name | chilema }}Dans `v-bind`, il est supporté depuis la version 2.1.0
<div v-bind:id="rawId | formatId"></div>Définir le filtre :
Utilisez le mot-clé filters pour définir des filtres
Les filtres définis ici sont des filtres locaux, là où ils sont définis et où ils sont utilisés.
Exemple de code :
Le paramètre value dans la méthode chilima est la valeur sur le côté gauche des doubles accolades |
N'oubliez pas que si la déclaration n'est pas écrite, rien ne sera affiché dans le navigateur
<!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>Sortie du navigateur :
Définissez un filtre global :
Les filtres globaux ne sont pas beaucoup utilisés, mais ils sont utilisés selon différentes situations
Exemple de code :
Lorsque le filtre global et le filtre local portent le même nom, le filtre local sera utilisé.
<!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>Sortie du navigateur :
Concaténation des filtres :
Exemple de code :
<!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>expliquer:
La valeur de name sera transmise à chilima en tant que paramètre, puis le résultat de chilima sera transmis à helema
Le dernier filtre affiché est le dernier
Sortie du navigateur :
Filtrer avec des paramètres :
{
{ name | chilema('arg1', arg2) }}chilima a trois paramètres, le nom sera son premier paramètre, la chaîne ordinaire 'arg1' sera le deuxième paramètre et arg2la valeur de l'expression sera le troisième paramètre.
Code de vue :
chilema(value,arg1,arg2){
return value+"，你吃了吗"
}Horodatage à l'heure
code:
<!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>Sortie du navigateur :
