HTML属性中的Vue.JS数据

Question

我现在正在使用Vue.JS和状态栏，我想知道如何将来自vue的数据放入html属性中。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

我已经尝试过了：

<div class="progress">
    <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

但是v-bind：不起作用。

Answer 1

为我工作。

 new Vue({ el: '#app', data: { score: 20 } }); 

 [aria-valuenow="20"] { color: red; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script> <div id="app" class="progress"> <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">${{this.score}}% Complete</span> </div> </div>