vue.js - Vue 模板是否可以自定义属性绑定(bind)？

Question

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

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

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

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

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