VueJs组件名称

Question

我在VueJS工作，我有以下代码

<li @click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li>

所以我试图完成的是显示名称{{selectedComponent}}

但是如其所示，它会显示“appManagment”，因为这是所选的组件。 所以问题是，如何显示不同的名称，例如我只想出现“Managment”而不是“appManagment”。 我正在将它用于显示用户所在位置的导航菜单，因此我们将不胜感激。

Answer 1

我会创建一个像下面那样的对象

var prettyNames = {
    'appManagment': 'Some very nice name'
}

然后只要您想显示与当前所选组件对应的文本，就可以使用它。例如

prettyNames[selectedComponent]

Answer 2

您可以使用全局Vue.filter（）方法注册自定义过滤器，传入filterID和过滤器函数。 filter函数将一个值作为参数，并返回转换后的值：

Vue.filter('custom', function (value) { 
   // add your code to determine 
   // name based on value here

   return newName;
 })

然后在文字上使用过滤器：

<i class="ion-clipboard"></i>{{ selectedComponent | custom }}