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

回答

相关问题