我是 nativescript vue 的新手，我有一个关于我想做的简单“切换”的问题。当我按下一个按钮时，它应该改变背景颜色。我试图通过 v-bind 实现这一点。我知道这不是最漂亮的代码... ;-)
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</ActionBar>
<StackLayout orientation="vertical" class="page-content">
<StackLayout orientation="horizontal" class="nix">
<StackLayout :class="{ active: isMaleActive }" ref='layoutMale' class="btn-img" orientation="vertical" padding="10" @tap="onTappedGender('male')" >
<Image src="~/assets/images/male.png" />
<Label text="Männlich" verticalAlignment="center"></Label>
</StackLayout>
<StackLayout :class="{ active: isFemaleActive }" ref='layoutFemale' class="btn-img" orientation="vertical" padding="10" @tap="onTappedGender('female')" >
<Image src="~/assets/images/female.png" />
<Label text="Männlich" verticalAlignment="center"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</Page>
</template>
<script>
export default {
data: {
isMaleActive: false,
isFemaleActive: false,
},
name: 'settings-view',
methods: {
onTappedGender(gender){
//console.log(gender);
if (gender == "male") {
this.isMaleActive = true;
this.isFemaleActive = false;
} else {
this.isMaleActive = false;
this.isFemaleActive = true;
}
console.log(this.isMaleActive);
}
},
}
</script>
<style scoped>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.btn-img{
border-radius: 5;
border-width: 1;
color: white;
margin: 10;
font-size: 22;
border-color: #2b3c6a;
height: 80;
width: 80;
}
.active{
background-color: blue;
}
</style>那么，代码有什么问题呢？非常感谢。