Vue의 필터 사용 정보

이 글은 주로 Vue 필터의 예제 코드와 Vue 필터의 기본 사용법을 소개합니다. 필요하신 분들은 참고하시면 됩니다.

1. 샘플 코드

는 Vue 단일 파일 컴포넌트를 채택하고 모멘트 플러그인 형식을 사용합니다. 날짜

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from &#39;moment&#39;;
 import &#39;moment/locale/zh-cn&#39;;
 moment.locale(&#39;zh-cn&#39;);
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

2. 효과

3. 설명

필터에 이 참조가 없으므로 사용하지 마세요. 필터를 사용하여 구성 요소 인스턴스의 변수나 메서드를 참조해 보세요.

ps: Vue 필터

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

//在mustache中使用
{{ msg | uppercase }}

또는

//在标签中使用
<input type="password" v-model="psw | validate">

의 기본 사용법을 살펴보겠습니다. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery+CSS를 사용하여 테이블을 구현하는 방법

Vue를 사용하여 주석 프레임워크를 구현하는 방법

v4 기록에 액세스할 수 없는 이유에 대해

response.body가 필요한 이유 ().string( )을 여러 번 호출할 수 없나요?

Vue 구성 요소를 사용하여 달력을 구현하는 방법(자세한 튜토리얼)

webpack을 사용하여 vue 스캐폴딩 구축

위 내용은 Vue의 필터 사용 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!