Vue2.0 시리즈에서 필터를 어떻게 사용하나요?
- 亚连원래의
- 2018-06-02 10:11:512559검색
이 글은 주로 Vue2.0 시리즈의 필터 사용법을 소개하고 참고자료를 제공합니다.
vue2.0은 필터를 포기했으며 일부 일반적인 텍스트 형식에 대한 사용자 정의 필터가 필요합니다.
사용하기 매우 쉬운 느낌입니다! !
필터는 이중 중괄호 보간과 v-bind 표현식의 두 가지 위치에서 사용할 수 있습니다.
파이프 문자로 표시된 JavaScript 표현식 끝에 필터를 추가해야 합니다.
1. 전역 필터 등록
참고:
1. 전역 메소드 Vue.filter()는 사용자 정의 필터를 등록하며 vue 인스턴스화 앞에 배치되어야 합니다. 필터 기능은 항상 다음으로 표현됩니다. 수식의 값은 첫 번째 매개변수로 사용됩니다. 따옴표가 있는 매개변수는 문자열로 처리되고, 따옴표가 없는 매개변수는 표현식으로 계산됩니다
3. 이 두 필터의 처리가 충돌하지 않는다면 두 개의 필터 매개변수를 설정할 수 있습니다
4. 입력에서 사용자가 입력한 데이터는 모델에 전송되기 전에 처리될 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
//全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
// 注册一个首字母大写的过滤器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局注册一个求和过滤器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
});
</script>
</body>
</html>Case 효과:
2. 인스턴스화 내부에 등록
필터는 다음과 같은 작업을 수행할 수 있습니다. 또한 인스턴스 내에서는 이를 사용하는 인스턴스 내에서만 등록됩니다. 위 사례에서 적용:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
},
filters: {
upcase:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
sum:function(value, a, b){
return value + a + b;
}
}
});
</script>
</body>
</html>효과:
3. 일반 필터
타임스탬프를 기준으로 시간 형식으로 변환: mm-dd hh:tt<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 将时间戳转化为时间 -->
<h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:1517568434324,
},
filters: {
formateTime:function(nS){
return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
}
}
});
</script>
</body>
</html> 사례 효과:
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련글:
vue.js 태그 속성에 변수 매개변수를 삽입하는 방법에 대해(상세 튜토리얼) Vue에서 컴포넌트 외부를 클릭하여 컴포넌트를 닫는 방법에 대해(상세 튜토리얼) 자세한 내용은 Vue Build를 패키징한 후 홈페이지에 흰색 화면이 나오는 문제를 해결해 주신 내용입니다(자세한 튜토리얼)위 내용은 Vue2.0 시리즈에서 필터를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.