uni-app vue 展开收起功能

<view class="contenfont"><view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'"v-if="item.font !==''" ><l

荔枝1

3731人浏览 · 2021-01-26 11:55:47

荔枝1 · 2021-01-26 11:55:47 发布

<view class="contenfont">
<view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'" v-if="item.font !==''" >
<label>
<span>{{item.font}} </span>
</label>
</view>
<view class="show" @click="btn" v-show="fold">展开 </view>
<view class="show" @click="btn" v-show="!fold">收起 </view>
</view>

data(){
return{
onOff: true, //默认开启展示
onNO: false, //默认关闭收起
fold: true
},
textfont:[{
font: "合抱之木，生于毫末；九层之台，起于垒土。实现中华民族伟大复兴是一个长期而艰巨的过程，需要凝聚磅礴之力，才能实现质的飞跃实现中华民族伟大复兴的中国梦汇聚了强大的“中国力量”。2013年3月17
}],
},
methodes:{
btn:function(){ // 收起展开
this.fold=!this.fold;
},
}

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^