ОТ РЕДАКЦИИ : Я «парус в море», прозвище происходит от названия имени моей подруги , а также. Я технология любовь, с открытым исходным кодом любовь, любовь программирования.
技术是开源的、知识是共享的,
Этот блог немного резюме и записать свое собственное обучение, если у вас есть Java - , алгоритмы , заинтересованные, вы можете сосредоточиться на своей динамике, мы учимся вместе.
用知识改变命运，让我们的家人过上更好的生活,
Фильтр Введение
Vue.js позволяет настраивать фильтры, он может быть использован для некоторого общего форматирования текста. Фильтры могут быть использованы в двух местах: 双花括号插值и v-bind 表达式(последняя поддерживается 2.1.0+). Фильтр должен быть добавлен в хвосте выражения JavaScript, то 管道символ указывается:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
Во-вторых, глобальные фильтры
В мировом масштабе определены фильтры перед созданием экземпляра Vue
【代码示例】
<!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>
Результаты испытаний :
过滤器可以串联, Он может быть использован во множестве выражения фильтра интерполяции, между фильтром с 管道符разнесенным, выполнением заказом фильтра слева направо.
{{ message | filterA | filterB }}
В этом примере,
filterAон определен как один аргумент и функцию фильтра, выражениеmessageзначения, которые передаются в качестве аргументов. Затем продолжайте тот же вызов определен как один аргумент и функцию фильтраfilterB, иfilterAрезультат передаетсяfilterB.
【代码示例】
<div>{{ msg | strUpper | strReplace }}</div>
Vue.filter('strReplace', function (str) {
return str.replace(/ /g, ',')
})
Результаты испытаний :
【知识拓展】
slice()Метод возвращает выбранные элементы из существующего массива.
① 语法:
arrayObject.slice(start,end)
② 参数:
| параметры | описание |
|---|---|
| Начните | Обязательно. Выберите, где, чтобы начать работать. Если он отрицательный, то он обеспечивает массив хвоста начинает бежать с места. То есть, последний элемент относится -1, -2 средства Предпоследний элемент, и так далее. |
| конец | Необязательно. Если положения конца отбора. Этот параметр является индексом массива в конце массива фрагментов. Если этот параметр не задан, то нарезанный массив содержит все элементы, от начала до конца массива. Если этот параметр имеет отрицательное значение, то это предписано начать работать с конца элементов массива |
③ 返回值:
Возвращает новый массив, содержащий элементы от начала до конца (не включая элемент) в ArrayObject.
В-третьих, местный фильтр
【代码示例】
<!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>
Результаты испытаний :
注意:
Когда фильтры имеют те же глобальные и локальные имена, когда два фильтра будет называться принципом близости к фильтру, фильтр локального приоритета над глобальным фильтром.
【知识拓展】
padStart()Завершение может быть проведено в начале строки символов.
① 语法:
str.padStart(targetLength [, padString])
② 参数:
| параметры | описание |
|---|---|
| targetLength | Текущая длина строки должна быть заполнена до цели. Если это значение меньше текущей длины строки, сама эта строка возвращается. |
| padString опционально | Заполненные строки. Если строка слишком длинная, так что заполненная длина строки превышает длину мишени, только самую левую часть заказа, а другие будут обрезаны. Значение по умолчанию для этого параметра «» (U + 0020). |
③ 返回值:
В начале исходной строки, указанная заливка не заполненная до новой длины строки целевой строки формируются.
借鉴网上的常用方法格式化时间
<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>
Из-за ограниченного уровня, этот блог будет неизбежно неадекватным, я умоляю вас Gangster крыло!
