显示与隐藏金额

fanxingxue

已于 2022-09-23 16:35:08 修改

阅读量473

点赞数

文章标签： vue.js javascript 前端

于 2022-09-23 16:29:03 首次发布

本文链接：https://blog.csdn.net/fanxingxue/article/details/127013457

版权

Vue.js v-if 图标切换条件渲染数据绑定

关键词由CSDN通过智能技术生成

利用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>