Vue 2.0에서 필터가 밟기 쉬운 구덩이

vue2.0에는 더 이상 필터가 없습니다. 필터를 정의해야 합니다.정의된 방법은 다음과 같습니다. 사용자 정의 필터를 등록합니다. 필터 ID와 필터 함수입니다.

Vue.filter('filtername',function(value, ){
        return  +value.split('').reverse().join('');

    });

function의 첫 번째 매개 변수value는 기본적으로 이 필터를 사용하는 데이터 대상의 값입니다. 이 예에서는 msg의 값'you are mine'입니다.갱1: 첫 번째 매개 변수는 반드시 자신의 값이어야 하며, 뒤에 임의의 많은 매개 변수를 추가할 수 있다.수순이 뒤바뀌면 오류가 발생할 수 있다.
다음은 가장 흔히 볼 수 있는 작은 예로 vue2.0 필터를 사용하고 v-text를 결합할 때 만나는 다른 몇 개의 구덩이를 설명한다.
필요: 페이지에서 순서를 반전시키는 문자열을 출력합니다.
전체 코드는 다음과 같습니다.


<html>
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>

style>
head>
<script src='./vue2.js'>script>
<script>
window.onload=function(){
    // ，  Vue.filter()  ， ：  ID  。
    Vue.filter('reverseString',function(value,myString){
        // function value data ， msg 'you are mine'。 ： ， 
        return myString+value.split('').reverse().join('');

    });

    new Vue({
        el:'#box',
        data:{
            msg:'you are mine'  
        }   
    });
};
script>
<body>

<div id='box'>
    <p>msg is: <br>{{msg}}p>
    <hr>
    <p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}p>

    
    
div>

body>
html>

출력 결과:

msg is: 
you are mine

reverse msg is: 
Hello:enim era uoy

갱2: vue2.0에서 필터는 유사한 함수의 쓰기 reverseString('I must tell you:')만 사용할 수 있고 괄호 안은 매개 변수로 vue1.0의 빈칸을 사용한 후 매개 변수를 추가하는 것과 다르다.
갱 3: v-text에서 필터로 효력을 잃었습니다. 왜냐하면 vue2.0에서 파이프 문자'|'는mousetache와 v-bind에서만 사용할 수 있기 때문입니다.
이상은 간단한 필터의 사용법일 뿐입니다. 복잡한 데이터 처리와 관련된 필터, 예를 들어 vue1.0에서 필터 커버 필터를 사용하는 기능을 실현하면 개인적으로도computed로 필터를 대체할 수 있습니다.

Vue 2.0에서 필터가 밟기 쉬운 구덩이

좋은 웹페이지 즐겨찾기