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

绑定属性的通用语法是

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

还有一个速记。

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

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

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