vue显示隐藏效果

效果"/>

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.isShowif(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>