[stencil]Boolean Props

pixabay

 

유형이 있는 Stencil 구성 요소의 속성은 boolean다음과 같이 선언될 수 있습니다.

import { Component, Prop, h } from '@stencil/core';

@Component({
    tag: 'ts-list-item',
})
export class TsListItem {
    @Prop() isComplete: boolean;
}

 

HTML에서 이 버전을 사용하려면 / ts-list-item문자열을 구성 요소에 전달합니다."true""false"

<!-- Set isComplete to 'true' -->
<ts-list-item is-complete="true"></ts-list-item>
<!-- Set isComplete to 'false' -->
<ts-list-item is-complete="false"></ts-list-item>

 

ts-list-itemTSX에서 이 버전을 사용하려면 중괄호로 묶인 true/를 사용합니다.false

// Set isComplete to 'true'
<ts-list-item isComplete={true}></ts-list-item>
// Set isComplete to 'false'
<ts-list-item isComplete={false}></ts-list-item>

 

booleanStencil이 주목할 가치가 있는 유형의 prop을 처리하는 몇 가지 방법이 있습니다 .

1. HTML에 false문자열이 제공된 경우 부울 소품의 값은 다음과 같습니다."false"

<ts-list-item is-complete="false"></ts-list-item>

 

1. HTML에 true없는 문자열이 제공된 경우 부울 소품의 값은 다음과 같습니다."false"

<!-- `true` for each of the following examples -->
<ts-list-item is-complete=""></ts-list-item>
<ts-list-item is-complete="0"></ts-list-item>
<ts-list-item is-complete="False"></ts-list-item>

 

1. 부울 속성의 값은 기본값이undefined 없고 다음 중 하나가 적용되는 경우입니다.
   1. 구성요소를 사용할 때 props은 포함되지 않습니다.
   2. props는 구성 요소를 사용할 때 포함되지만 값은 제공되지 않습니다.

 <!-- isComplete value of `undefined` -->
<ts-list-item></ts-list-item>
<ts-list-item is-complete></ts-list-item>