Vue 템플릿에서 사용자 지정 특성 바인딩이 가능합니까?

Vue 템플릿에서 사용자 지정 특성 바인딩이 가능합니까?

Vue 템플릿에서 사용자 지정 특성 값을 바인딩하려고 합니다.이거 어떻게 해?

(EDIT: 다음 코드는 실제로 올바르게 바인딩됩니다.서드파티 라이브러리(Foundation)가 바인딩을 방해하고 있습니다.다른 사람들에게 도움이 될 수 있는 질문을 남겨두는 것.

<template>
    <span v-bind="{ 'aria-controls': inputControlId }"></span>
    <input v-bind="{ 'id': inputControlId }">
</template>

<script lang="ts">

    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component
    export default class Slider extends Vue {
       inputControlId = "TheBourneId";
    }
}
</script>

바인딩 속성의 일반적인 구문은 다음과 같습니다.

<template>
    <span v-bind:aria-controls="inputControlId"></span>
    <input v-bind:id="inputControlId">
</template>

줄임말도 있어요.

<template>
    <span :aria-controls="inputControlId"></span>
    <input :id="inputControlId">
</template>

질문의 구문을 사용하여 여러 속성을 한 번에 바인딩할 수 있습니다. 외부에서는 일반적으로 사용되지 않습니다.class또는style(특히 단일 Atribute의 경우)

진짜 문제는 당신의 CSS 프레임워크였던 것 같군요.

언급URL : https://stackoverflow.com/questions/44709265/are-custom-attribute-bindings-possible-with-vue-templates