Vue 模板可以自定义属性绑定吗？

Question

我正在尝试在我的 Vue 模板中绑定自定义属性值。我怎样才能做到这一点？

（编辑：以下代码实际上正确绑定。第三方库（基金会）干扰了绑定。留下问题，因为它可能对其他人有用。

<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 的常用语法是

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

还有一个shorthand。

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

您可以使用问题中的语法一次绑定multiple properties，它在class 或style 之外不常用，尤其是对于单个属性。

听起来真正的问题是您的 CSS 框架。