Vue.js:大写不起作用

时间:2017-06-12 07:24:29

标签: javascript vue.js uppercase

我有这段代码:

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

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

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

但是,文本仍为小写。 你知道为什么吗?

5 个答案:

答案 0 :(得分:14)

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

答案 1 :(得分:9)

Vue.js sinse 2.x中没有内置过滤器,因此您需要手动定义过滤器:

&#13;
&#13;
new Vue({
  el: '#app',
  data: {
    cols: ['nome', 'data', 'size', 'ext']
  },
  filters: {
    uppercase: function(v) {
      return v.toUpperCase();
    }
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

我知道您要求VueJS / Javascript实现,但是我也想分享自己的工作。我强烈建议您仅在此部分使用CSS来节省一些处理。是的,我知道Vue速度中大写第一个单词的实现意义不大,但是如果您希望节省脑力,那么CSS text-transform: capitalize就可以了,因为您只关心它的唯一UI,对吧?这里是一些参考文献https://www.w3schools.com/cssref/pr_text_text-transform.asp

答案 3 :(得分:1)

您只需要做下一个:

`<th v-for="col in cols">
    {{col = col.toUpperCase()}}
 </th>`

答案 4 :(得分:0)

有两种添加过滤器的方法:

  1. 新Vue时
new Vue({
    el: '#app',
    data: {},
    methods: {},
    filters: {
        uppercase: function (value) {
            if (!value) return ''
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
})
  1. 在新Vue(全球)之前
Vue.filter('uppercase', function (value) {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
})