HTML屬性中的Vue.JS數據

我正在使用Vue.JS和一個狀態欄，我想知道如何將vue中的數據放在html屬性中。HTML屬性中的Vue.JS數據

<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-綁定：不工作。

來源

2017-03-16 Jan-Willem de Boer

試ARIA-valuenow = 「{{得分}}，如果你改變了默認括號它會像詠歎調，valuenow =」 $ {得分}％」 –

'詠歎調，valuenow插入屬性現在不推薦使用，而是使用'v-bind'如'v-bind：aria-valuenow =「score」'或'：aria-valuenow =「得分「'。 – Gerardo

適合我。

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>

來源

2017-03-16 14:10:27

嗯，我通過你的代碼嘗試了它，它工作。謝謝！ –

HTML屬性中的Vue.JS數據

回答

相關問題