EDITORIAL : Soy una "vela al mar", el apodo viene del nombre del nombre de mi novia también. La tecnología que el amor, el amor de código abierto, la programación amor.
技术是开源的、知识是共享的.
Este blog es un pequeño resumen y registrar su propio aprendizaje, si usted tiene Java , algoritmos interesado, puede centrarse en mi dinámica, podemos aprender juntos.
用知识改变命运，让我们的家人过上更好的生活.
Directorio artículo
Un filtro Introducción
Vue.js le permite personalizar los filtros, que puede ser utilizado por algún formato de texto común. Los filtros pueden ser utilizados en dos lugares: 双花括号插值y v-bind 表达式(este último está soportado desde 2.1.0+). El filtro debe ser añadido a la cola de la expresión JavaScript, el 管道símbolo indica:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
En segundo lugar, los filtros globales
Globalmente filtros definidos antes de crear el Vue instancia
【代码示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg | strUpper }}</div>
</div>
<script>
// 定义一个全局过滤器，把字符串的第一个字符转换为大写
Vue.filter('strUpper', function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
})
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
</body>
</html>
Resultados de la prueba :
过滤器可以串联. Puede ser utilizado en una pluralidad de expresión filtro de interpolación, entre el filtro con 管道符espaciados, orden de ejecución del filtro de izquierda a derecha.
{{ message | filterA | filterB }}
En este ejemplo,
filterAse define como un solo argumento y la función de filtro, de expresión demessagevalores que se deben pasar como argumentos. A continuación, siga la misma llamada se define como un solo argumento y la función de filtrofilterB, yfilterAel resultado se transmite afilterBla.
【代码示例】
<div>{{ msg | strUpper | strReplace }}</div>
Vue.filter('strReplace', function (str) {
return str.replace(/ /g, ',')
})
Resultados de la prueba :
【知识拓展】
slice()devuelve el método seleccionan elementos de la matriz existente.
① 语法:
arrayObject.slice(start,end)
② 参数:
| parámetros | descripción |
|---|---|
| comienzo | Requerido. Elegir dónde empezar a trabajar. Si es negativo, entonces se ofrece una gran variedad de cola comienza a correr a partir de la ubicación. Es decir, el último elemento se refiere -1, -2 medios penúltimo elemento, y así sucesivamente. |
| fin | Opcional. Cuando las disposiciones de la final de la selección. Este parámetro es un índice de la matriz al final de una serie de fragmentos. Si no se especifica este parámetro, a continuación, en rodajas matriz contiene todos los elementos desde el principio hasta el final de la matriz. Si este parámetro es negativo, entonces se prescribe empiezan a correr desde el final de los elementos de la matriz |
③ 返回值:
Devuelve una nueva matriz que contiene elementos de principio a fin (no incluyendo el elemento) en el ArrayObject.
En tercer lugar, filtro local
【代码示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="winowh=device-winowh, initial-scale=1.0">
<title>过滤器学习2</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>当前时间是： {{ dateTime }}</div>
<div>格式化后的时间是： {{ dateTime | dateFormat }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
dateTime: new Date(),
},
// 定义一个局部的过滤器，格式化当前时间
filters: {
dateFormat: (dateTime) => {
var now = new Date(dateTime)
var y = now.getFullYear()
var m = (now.getMonth() + 1).toString().padStart(2, '0')
var d = now.getDate().toString().padStart(2, '0')
var hh = now.getHours().toString().padStart(2, '0')
var mm = now.getMinutes().toString().padStart(2, '0')
var ss = now.getSeconds().toString().padStart(2, '0')
// 过滤器中要有返回值
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
})
</script>
</body>
</html>
Resultados de la prueba :
注意:
Cuando los filtros tienen los mismos nombres globales y locales cuando los dos filtros serán llamados el principio de proximidad al filtro, el filtro de la prioridad local sobre el filtro global.
【知识拓展】
padStart()La terminación se puede llevar a cabo al comienzo de la cadena de caracteres.
① 语法:
str.padStart(targetLength [, padString])
② 参数:
| parámetros | descripción |
|---|---|
| targetLength | longitud de la cadena actual necesita ser llenado a un objetivo. Si este valor es menor que la longitud actual de la cadena, esta cadena se devuelve en sí. |
| padString opcional | Lleno de cadena. Si la cadena es demasiado largo, por lo que la longitud de la cadena llena excede la longitud de destino, sólo el del extremo izquierdo parte de la reserva, el otro será truncado. El valor predeterminado para este parámetro "" (U + 0020). |
③ 返回值:
Al principio de la cadena especificada de llenado original de llenado hasta una nueva longitud de cadena de la cadena de destino está formado.
借鉴网上的常用方法格式化时间
<body>
<div id="app">
<div>当前时间是： {{ dateTime }}</div>
<div>格式化后的时间是： {{ dateTime | dateFormat('yyyy-MM-dd hh:mm:ss') }}</div>
</div>
<script>
Date.prototype.format = function (format) {
var dateMap = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
"S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp
.$1.length));
for (var k in dateMap)
if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, (RegExp.$1.length ==
1) ? (dateMap[k]) : (("00" + dateMap[k]).substr(("" + dateMap[k]).length)));
return format;
}
var vm = new Vue({
el: '#app',
data: {
dateTime: new Date(),
},
// 定义一个局部的过滤器，格式化当前时间
filters: {
dateFormat: (dateTime, fmt) => {
var dt = new Date(dateTime)
return dt.format(fmt)
}
},
})
</script>
</body>
Debido al limitado nivel, este blog será inevitablemente inadecuada, te imploro ala del gángster!
