Vue.js:大写不起作用

Question

我有这个代码:

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

我需要将文本转换为大写.我按照官方网站的例子尝试了这种方式:

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

但是,文本仍为小写.你知道为什么吗？？

Answer 1

有另一种更简单的方法可以做到这一点.您可以直接在双括号表示法中使用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>

Answer 2

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>