javascript - Vuejs 在对象的属性之间切换？

Question

我有一个对象数组，里面有名字和姓氏。如何通过单击按钮在名字和姓氏之间切换？

new Vue({
  el: '#app',
  data() {
    return {
      myArray: [{
          firstName: 'ricky',
          lastName: 'martin'
        },
        {
          firstName: 'tony',
          lastName: 'Montana'
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<button>Click me to switch between first and Last names</button>  
</div>
</template>

我仍在努力了解 vuejs 的一些基本概念，所以请原谅任何幼稚的问题。谢谢。

Answer 1

您可以设置新变量并设置要查看的内容:

<template>
    <div v-for="item in myArray">
         <div v-if="showLastName">
             {{item.lastName}}
         </div>
         <div v-else>
             {{item.firstName}}
         </div>
    </div>
    <div>
        <button @click="showLastName = !showLastName">
           Click me to switch between first and Last names
        </button>  
    </div>
</template>

并且在 data() 中添加变量 showLastName 如下:

data() {
    return {
      showLastName: false,
      myArray: [{
          firstName: 'ricky',
          lastName: 'martin'
        },
        {
          firstName: 'tony',
          lastName: 'Montana'
        }
      ]
    }
  }

这应该有效。

祝你好运!