데이터 변수가 true인 경우에만 VueJs Bind Propoice

데이터 변수가 true인 경우에만 VueJs Bind Propoice

변수가 다음과 같이 설정된 경우에만 속성을 바인딩하려면 어떻게 해야 합니까?true?

<template>
    <v-list-tile :class="{[$color]: isItemSelected, [$primaryText]: isItemSelected}" :href="route">
        <v-list-tile-action>
            <v-icon :color="$primaryIcon">{{ icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
            <v-list-tile-title>{{ title }}</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</template>

<script>
    export default {
        name: 'list-tile-text-icon',
        props: ['icon', 'title', 'route'],
        data: () => ({
            isItemSelected: false
        }),
        created() {
            this.isItemSelected = window.location.href === this.route;
        }
    }
</script>

4호선을 타려면 제본해야 합니다.:color="$primaryColor"그 때만이isItemSelected변수는 다음과 같습니다.true.

에서 사용되는 값v-bind는 JavaScript 표현식이므로 조건(삼진수) 연산자를 사용할 수 있습니다.

<v-icon :color="isItemSelected ? $primaryIcon : null">

주의: 전화하겠습니다.v-bind왜냐면:의 줄임말일 뿐이다v-bind.예.:color=""와 같다v-bind:color=""

Vue 클래스 및 스타일 바인딩 문서

이것은 vue 클래스 및 스타일 바인딩에 대한 공식 문서입니다.

상세:

<v-list-title :class="{someClassYouDefine: isItemSelected}"> </v-list-title>

원하는 스타일을 쓰세요.

<style>
   .someClassYouDefine {
      color: $primaryColor;
   }
</style>

언급URL : https://stackoverflow.com/questions/49289188/vuejs-bind-prop-only-if-data-variable-is-true