vue显示隐藏效果

<template>
	<view>
		<view>
			<view style="display: flex;">
				<view>标题</view>
				<button v-text="btnText" @click="showToggle"></button>
			</view>
			<!-- 内容简介 -->
			<view v-show="isShow" class="content">
				<view class="contento">
					<text>原创</text>
					<text>|</text>
					<text>{{played}}万次播放</text>
				</view>
				<view>{{creatime}}发布</view>
				<view>{{introduction}}</view>
			</view>
			<view style="border: 1upx solid;width: 99%;height: 60upx;">
				xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
			</view>
		</view>
		
	</view>
</template>
	
<script>
	export default {
		data() {
			return {
				btnText:"▼",
				isShow:false,
				played:616,
				creatime:'2019年01月1日',
				//内容简介
				introduction:'内容简介：uuuuuuuuuuuuuuuuuuuuuuuuu'
			}
		},
		methods:{
			showToggle:function(){
				this.isShow = !this.isShow
				if(this.isShow){
					this.btnText = "▲"
				}else{
					this.btnText = "▼"
				}
			}
		}
		
	}
</script>

<style>
	.content{
		color: #C0C0C0;
	font-size: 12upx;
	}
	.content view{
		margin: 1%;
	}
	.contento text:nth-child(2){
		font-size: 10upx;
		padding: 2%;
	}
</style>