사설 : 나는 "바다 항해는"별명이 내 여자 친구의 이름의 이름에서 유래뿐만 아니라입니다. 나는 사랑의 기술, 오픈 소스 사랑, 사랑의 프로그래밍.
技术是开源的、知识是共享的.
이 블로그는 조금 요약하고있는 경우, 자신의 학습을 기록 자바는 , 알고리즘 관심, 당신은 내 동적에 초점을 맞출 수 있습니다, 우리는 함께 배운다.
用知识改变命运，让我们的家人过上更好的生活.
기사 디렉토리
필터 소개
Vue.js 당신이 필터를 사용자 정의 할 수 있습니다, 그것은 몇 가지 일반적인 텍스트 서식에 사용할 수 있습니다. 필터는 두 곳에서 사용할 수 있습니다 双花括号插值및 v-bind 表达式(후자는 2.1.0 이상에서 지원됩니다). 필터가 자바 스크립트 표현의 말미에 추가되어야 상기 管道기호 표시 :
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
둘째, 글로벌 필터
전 세계적으로 인스턴스 뷰를 작성하기 전에 필터를 정의
【代码示例】
<!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>
제한된 수준으로 인해,이 블로그는 필연적으로 부적절한 것, 나는 갱스터 날개는 당신에게 간청합니다!
