vue.js에서 필터를 사용하는 방법

vue.js에서 필터를 사용하는 방법: 1. 매개변수 없이 전역 필터를 정의합니다. 코드는 [Vue.filter('msgFormat', function(msg)]; 2. 매개변수로 전역 필터를 정의합니다. 코드는 다음과 같습니다. [Vue.filter('msgFormat', funct].

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6. 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

[관련 권장 사항] 기사: vue.js]

vue.js에서 필터를 사용하는 방법:

vue의 필터는 로컬 필터와 전역 필터의 두 가지 유형으로 나뉩니다

1 매개 변수 없이 전역 필터를 정의합니다.

       Vue.filter('msgFormat', function(msg) {    // msg 为固定的参数 即是你需要过滤的数据
            return msg.replace(/单纯/g, 'xxx')
       })

전체 예

    <div id="app">
            <p>{{ msg | msgFormat}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, &#39;xx&#39;)
            })
        </script>

2. 매개변수를 사용하여 전역 필터 정의

       <div id="app">
            <p>{{ msg | msgFormat(&#39;疯狂&#39;,&#39;--&#39;)}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg, arg, arg2) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, arg+arg2)
            })
      </script>

3. 로컬 필터

매개변수가 있고 매개변수가 없는 로컬 필터의 정의 및 사용은 전역 필터와 동일합니다. 필터가 작동하는 영역은 vue 인스턴스에 의해 제어되는 영역이기도 합니다. [#app]

            // 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
                },
                methods: {},
                //定义私用局部过滤器。只能在当前 vue 对象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

참고:

1. 동일한 이름, 로컬 및 글로벌 필터는 근접 원칙에 따라 호출됩니다. 즉, 로컬 필터가 글로벌 필터보다 먼저 호출됩니다.

2. 필터의 실행 순서는 각각 분리되어야 합니다. 기타. 왼쪽에서 오른쪽으로

관련 학습 권장 사항: js 비디오 튜토리얼

위 내용은 vue.js에서 필터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!