利用v-if进行判断,完成图标的切换(方法好像很笨)
<template>
<view class="container">
<!-- 睁眼显示余额,闭眼隐藏余额 -->
<view class="card-money">
<text v-if=" flag == true">{{ totalMoney }}</text>
<text v-if=" flag == false">{{ totalxing }}</text>
<view @click="change" >
<text v-if=" flag == true">打开</text>
<text v-if=" flag == false">关闭</text>
<!-- <uni-icons custom-prefix="iconfont" type="icon-yanjing" size="15" color="#000" v-if=" flag == true" ></uni-icons>
<uni-icons custom-prefix="iconfont" type="icon-biyan" size="15" color="#000" v-if=" flag == false"></uni-icons> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
totalMoney:'6,086.18',
totalxing:'* * * *',
flag:true,
}
},
methods: {
// 显示与隐藏总收入
change() {
this.flag=!this.flag
},
}
}
</script>
<style lang="scss" scoped>
.card-money{
background: #FF8D1A;
display: flex;
align-items: center;
font-size: 17px;
width: 200px;
height: 200px;
text{
margin-left: 10px;
}
}
</style>