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

Question

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

(编辑：以下代码实际上绑定正确。第三方库 (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>

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 框架。

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

Are custom attribute bindings possible with Vue templates?

vue.js

vue-component

vuejs2