Vue.js：大寫不起作用

Question

我有這樣的代碼：

data: { 
    cols: ['nome', 'data', 'size', 'ext'], 
    items: [] 
}, 

我需要把文本轉換爲大寫。 我試過這種方式，按照官方網站的例子：

<th v-for="col in cols"> 
    {{col | uppercase}} 
</th> 

然而，文本保持小寫。 你知道爲什麼嗎？

Answer 1

有在Vue.js sinse 2.x中沒有內置過濾器，所以你需要手動定義過濾器：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    cols: ['nome', 'data', 'size', 'ext'] 
 
    }, 
 
    filters: { 
 
    uppercase: function(v) { 
 
     return v.toUpperCase(); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <table> 
 
    <thead> 
 
     <th v-for="col in cols"> 
 
     {{col | uppercase}} 
 
     </th> 
 
    </thead> 
 
    </table> 
 
</div>

Answer 2

還有另一種更簡單的方法做這個。您可以直接在雙括號內使用Javascript，而不是使用@ wostex的過濾器方法。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    cols: ['nome', 'data', 'size', 'ext'] 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <table> 
 
    <thead> 
 
     <th v-for="col in cols"> 
 
     {{ col.toUpperCase() }} 
 
     </th> 
 
    </thead> 
 
    </table> 
 
</div>