vue.delay 조건부 속성 렌더링

vue.delay 조건부 속성 렌더링

이 질문에는 이미 답변이 있습니다.

VueJ는 조건부로 요소의 속성을 추가합니다. (10개의 답변)

닫힘3년 전.

Vue.js에서 HTML 속성을 조건부로 렌더링하는 가장 좋은 방법을 알고 싶습니다.예를 들어 add라고 입력합니다.data-toggle="tooltip"현재 인스턴스에 대한 툴팁 메시지가 있는지 확인합니다.

현재 가지고 있는 코드:

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

하지만 두 번째 줄은 별로 좋아하지 않습니다. 여기서 계산한 속성을 사용하더라도, 저는 이 두 번째 줄에 대한 정보가 없는 것을 선호합니다.data-toggle표시할 툴팁이 없는 경우 Atribute가 전혀 표시되지 않습니다.

매우 우아한 솔루션:

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

예, 예, 예. 빈 문자열이 아니라 부울 false가 있어야 합니다.

예를 들어 다음과 같습니다.

<span ref="column">
  {{ col.col_spec.title }}
</span>

그리고 Vue에서는:

mounted(){
    if (this.col.col_spec.tooltip){
      this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
    }
}

조금 늦었지만 제 생각은 이렇습니다.

HTML:

<span
  :data-toggle="tooltip"
  :data-original-title="tooltipTitle"
>
  {{ tooltipTitle }}
</span>

Vue:

methods: {
    tooltipTitle: function() {
        var title = this.col.col_spec.title;
        if (!!title) return title;
        return false;
    }
}

표시할 항목이 없는 경우 "data-original-title" 속성이 삭제되어 툴팁이 모두 삭제됩니다."title" 속성을 초기화하면 부트스트랩에서 자동으로 추가되기 때문에 "title" 대신 "data-original-title"을 사용해야 합니다. "title"을 false로 변경해도 "data-original-title"은 삭제되지 않습니다.

여기 또 다른 솔루션이 있습니다.하지만 그다지 우아하지는 않습니다.

<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
    {{ col.col_spec.title }}
</span>
<span v-else >
    {{ col.col_spec.title }}
</span>

언급URL : https://stackoverflow.com/questions/41681534/vue-js-conditional-rendering-of-an-attribute