我有一个对象数组,其中包含名字和姓氏。如何通过单击按钮在名字和姓氏之间切换?
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 的一些基本概念,所以请原谅任何天真的问题。谢谢。
最佳答案
您可以设置新变量并设置要查看的内容:
<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'
}
]
}
}
这应该有效。
祝你好运!
关于javascript - Vuejs 在对象的属性之间切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58508014/