VueJS 조건부로 요소의 속성 추가

VueJS 조건부로 요소의 속성 추가

VueJS에서는 v-if를 사용하여 DOM 요소를 추가하거나 제거할 수 있음:

<button v-if="isRequired">Important Button</button>

그러나 다음과 같이 조건부로 설정된 돔 요소의 속성을 추가/제거할 수 있는 방법이 있는가?

Username: <input type="text" name="username" required>

다음과 유사한 방법으로:

Username: <input type="text" name="username" v-if="name.required" required>

좋은 생각 있어?시도:

<input :required="test ? true : false">

업데이트: Vue 3에서 변경되었으므로 이 답변 https://stackoverflow.com/a/64598898을 참조하십시오.

가장 간단한 양식:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

Vue 3에서 속성의 조건부 렌더링이 변경됨. 속성 사용을 생략하려면

null

또는

undefined

.Vue 2:

<div :attr="false">
Result: <div>

<div :attr="null">
Result: <div>

Vue 3:

<div :attr="false">
Result: <div attr="false">

<div :attr="null">
Result: <div>

<input :required="condition">

필요없습니다

<input :required="test ? true : false">

왜냐하면 만약 테스트가 truthy라면 당신은 이미 그 테스트를 받을 것이기 때문이다.

required

속성, 그리고 테스트가 거짓이면 속성을 얻을 수 없다.그

true : false

부품은 여분이야, 이것과 거의 비슷해...

if (condition) {
    return true;
} else {
    return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed

그렇다면 이 바인딩을 하는 가장 간단한 방법은

<input :required="condition">

테스트(또는 조건)를 잘못 해석할 수 있는 경우에만 다른 조치를 취할 필요가 있다. 이 경우 Syed는 다음을 사용한다.

!!

요령을 터득하다

  <input :required="!!condition">

합격할 수 있다.

boolean

억지로 붙여서

!!

변수 앞에

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

그러나 수신 구성 요소가 정의된 다음 사례에 대해 주의를 끌고자 한다.

type

소품용그 경우

isRequired

유형을 다음과 같이 정의함

string

그때 지나가다

boolean

형식 확인이 실패하면 Vue 경고를 받게 된다.그 소품 통과를 피하고 싶을 수도 있으니 그냥 놔둬라.

undefined

낙오자와 소품들은 에 보내지지 않을 것이다.

component

let isValue = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>

설명

나도 같은 문제를 겪었고, 위에 해결책들을 시도해봤어!!그래, 잘 모르겠네

prop

하지만 그것은 실제로 여기서 요구되는 것을 충족시키지 못한다.내 문제 -

let isValid = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist': false"
/>

위의 경우, 내가 기대한 것은 가지지 않은 것이다.

my-prop

하위 구성 요소에 전달 -

<any-conponent/>

나는 그것을 볼 수 없다.

prop

에

DOM

하지만 내겐

<any-component/>

구성 요소, 프로펠러 유형 점검 실패의 오류 발생.아동 구성 요소에서와 같이, 나는 예상한다.

my-prop

a가 되다

String

그러나 그것은 그렇다.

boolean

.

myProp : {
 type: String,
 required: false,
 default: ''
}

그 말은 아동 구성품이 그것이 비록 그것이 그렇더라도 소품을 받았다는 것을 의미한다.

false

여기서 트위크는 어린이 구성요소가 다음 기능을 수행하도록 하는 것이다.

default-value

그리고 계산은 생략한다.통과된

undefined

그래도 효과가 있어!

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
 

이것은 효과가 있고 내 아이 소품에는 기본값이 있다.조건부로 속성을 추가하려면 동적 선언도 추가하십시오.

<input v-bind="attrs" />

특성(attors)이 개체로 선언되는 경우:

data() {
    return {
        attrs: {
            required: true,
            type: "text"
        }
    }
}

그 결과:

<input required type="text"/>

여러 속성을 가진 경우에 이상적임.다음과 같은 속성 전에 콜론을 추가할 수 있다(조건도 사용할 수 있음).

<div :class="current? 'active': '' " > 
<button :disabled="InvalidForm? true : false " >

소품과 같은 동적 값을 설정하려면 다음과 같은 속성 이름 앞에 콜론을 사용하십시오.

<Child :data="userList" />

html 사용 시

<input :required="condition" />

그리고 다음과 같은 데이터 속성에 정의

data () {
   return {
      condition: false
   }
}

계산된 것도 사용할 수 있다.

<input :required="isRequired" />

계산됨:

computed: {
   isRequired () {
      return someLogic //Boolean, true or false
   }

이런 글을 쓸 수 있을 겁니다

<input type="text" name="username" :required="condition ? true : false">

참조URL: https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element