は、Vueのテンプレートで可能なカスタム属性バインディングはありますか？

Question

私はVueのテンプレートでカスタム属性値をバインドしようとしています。これどうやってするの？

（EDIT：次のコードは、実際に正しくバインドするサードパーティのライブラリー（財団）は、それが他の人に有用である可能性があるとして疑問を残し結合に干渉した

<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> 

Answer 1

ための共通の構文。。。 binding attributesはshorthandもあり

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

です。

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

あなたは、あなたの質問に構文を使用して、一度 multiple propertiesをバインドすることができます

、それだけで、一般的に、特に、単一の属性のために、classまたはstyle外で使用されていません。

実際の問題は、あなたのCSSフレームワークのようでした。