我是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>
那么,代码有什么问题? 非常感谢。
答案 0 :(得分:1)
在Vue组件中,data
应该是返回对象的函数。
答案 1 :(得分:0)
您无法编写此代码,因为您绑定了类属性并将其设置为静态。
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
您需要做的是:
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >