Vue 의 슬롯 과 필터 에 대한 심도 있 는 설명
무엇이 슬롯 입 니까?
콘 셉 트
Vue 는 콘 텐 츠 배포 API 를 실현 하여 구성 요소 에 배포 콘 텐 츠 를 탑재 하 는 출구 로
쉽게 말 하면
슬롯 내용
문법
우선 파일 을 새로 만들어 서 우리 의 slot 를 씁 니 다.
// slot.vue
<template>
<div>
<div>
<!-- slot -->
<slot></slot>
</div>
<p> : <input /></p>
<p> : <input type="password" /></p>
<button> </button>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
// SlotTest.vue
<template>
<div>
<slotCom>
<h2> slot </h2>
</slotCom>
</div>
</template>
<script>
//
import slotCom from "../views/slot";
export default {
components: {
slotCom
},
}
</script>
<style>
</style>
주의 하 다.
컴 파일 역할 영역
한 슬롯 에 데 이 터 를 사용 하고 싶 을 때,예 를 들 어:
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
/* `url` undefined， ( )
_ _ <navigation-link>
<navigation-link> * * 。
*/
</navigation-link>
부모 템 플 릿 의 모든 내용 은 부모 역할 영역 에서 컴 파일 되 었 습 니 다.하위 템 플 릿 의 모든 내용 은 하위 역할 영역 에서 컴 파일 되 었 습 니 다.
예비 내용
예 를 들다
// ， Submit
<button type="submit">
<slot>Submit</slot>
</button>
// <submit-button> ：
<submit-button></submit-button>
// “Submit” ：
<button type="submit">
Submit
</button>
// ：
<submit-button>
Save
</submit-button>
// ：
<button type="submit">
Save
</button>
개념 은 때때로 우리 구성 요소 에 여러 개의 슬롯 이 필요 하 다.서로 다른 구성 요 소 를 서로 다른 슬롯 내부 에 삽입 할 수 있 습 니 다.실현 방법 은 구명 슬롯 을 사용 하여 구성 요소 의
문법
// login-component.vue
<template>
<div>
<div>
<slot> </slot>
</div>
<p>
: <slot name="user"></slot>
</p>
<p>
: <slot name="psd"></slot>
</p>
<button> </button>
<slot></slot>
</div>
</template>
//
<login-component>
<h2> slot </h2>
<template v-slot:user>
<!-- name="user" -->
<div>
123
</div>
</template>
<input slot="psd" type="password" placeholder=" name=psd ">
<component-a slot="psd"></component-a>
</login-component>
v-on 과 v-bind 와 마찬가지 로 v-slot 도 줄 임 말 이 있 습 니 다.즉,매개 변수 이전의 모든 내용(v-slot:)을 문자\#로 바 꾸 는 것 입 니 다.예 를 들 어 v-slot:header 는\#header 로 다시 쓸 수 있 습 니 다.
<login-component>
<h2> slot </h2>
<template #user>
name="user"
<div>
123
</div>
</template>
<template #psd>
<input type="password" placeholder=" name=psd ">
</template>
</login-component>
필터
콘 셉 트
Vue.js 는 일반적인 텍스트 포맷 에 사용 할 필 터 를 사용자 정의 할 수 있 습 니 다.필 터 는 두 곳 에 사용 할 수 있 습 니 다.쌍 괄호 삽입 값 과 v-bind 표현 식(후 자 는 2.1.0+부터 지원 합 니 다).필 터 는 JavaScript 표현 식 의 끝 에 추가 되 어야 합 니 다."|"기호 로 표시 합 니 다.
문법
filter 는 전역 필터 나 부분 필 터 를 지원 합 니 다.
전역 필터
<div id="app">
{{str | capitalize}} // Hello
</div>
//
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data: {
str: 'hello'
}
})
<div id="app">
<div v-for="(f,i) in friends" :key="i">
<h3> : {{f.name}} </h2>
<p> : {{f.age}}</p>
<p> : {{f.sex|getSex}}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
friends: [{
name: 'Max',
sex: 0,
age: 19
},
{
name: 'Jack',
sex: 1,
age: 22
},
{
name: 'Jacose',
sex: 1,
age: 19
},
{
name: 'Tim',
sex: 1,
age: 18
},
{
name: 'Jimmy',
sex: 0,
age: 20
},
{
name: 'Tom',
sex: 0,
age: 19
},
]
},
filters: {
getSex(type) {
if (type === 0) {
return ' '
}
return ' '
}
}
})
</script>
<div>{{'hello' | substr(3,4)}}</div>
<script>
{
filters: {
substr(str,start,end) {
return str.substr(start,end)
}
}
}
</script>
시간 스탬프 문자열 을 지정 한 템 플 릿 에 따라 대응 하 는 구조의 시간 을 되 돌려 주 는 필 터 를 실현 합 니 다.
//
<p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56
<p>{1599639292100 | getTemplateTimeByDate('YYYY-M-d h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY M d hh:mm')}</p> -> 2020 9 9 15:04
new Vue({
el: '#app',
data: {
date: new Date().getTime()
},
filters: {
getTemplateTimeByDate(date, template) {
date = new Date(date)
let TimeObj = {
'Y+': date.getFullYear(),
'(M+)': date.getMonth() + 1,
'(d+)': date.getDate(),
'(h+)': date.getHours(),
'(m+)': date.getMinutes(),
'(s+)': date.getSeconds()
}
for (key in TimeObj) {
let reg = new RegExp(key)
if (reg.test(template)) {
console.log(RegExp.$1)
let time = TimeObj[key]
//
// , 1 -> 01
//
if (RegExp.$1.length > 1) {
time = time >= 10 ? time : '0' + time
}
template = template.replace(reg, time)
}
}
return template
}
}
})
</script>
Vue 의 슬롯 과 필터 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue 슬롯 과 필터 에 관 한 더 많은 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
