Vuejs - 如何更改 {{ }} 中的文本

Question

我最近一直在构建数据 table，但卡在了某个地方。我希望我的列是可点击的，以便能够按升序和降序显示行。当它们按升序显示时，我想显示我的 arrow_upward 图标，否则我想显示 arrow_downward 图标。这是我到目前为止所做的...

data () {
    return {
      arrow_upward: 'arrow_upward',
      arrow_downward: 'arrow_downward',
    }
   }

顺便说一句，这是我对 Material 图标的使用...

<span class="table-icons">arrow_upward</span>

我先试了这个；

<span class="table-icons" v-if="col == sortColumn">{{arrow_upward}}</span>

基本上我是说，如果按列排序，显示 arrow_upward 图标。这是我的问题。每次单击该列时，我将如何在 {{ }} 内进行更改。它应该像切换一样工作，插值标签应该在 arrow_upward 和 arrow_downward 之间变化。我该怎么做？

Answer 1

您可以使用以下条件渲染：

 <span class="table-icons" >{{col == sortColumn?'arrow_upward':'arrow_downward'}}</span>

无需将它们定义为数据属性。

Vuejs - How to change the text inside {{ }}