HTML属性のVue.JSデータ

Question

私はVue.JSとステータスバーを使って作業していますが、hue属性にvueのデータを入れる方法は不思議でした。

<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-バインド：

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

私はすでにこれを試した動作しません。

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>