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>