Vue实现“显示更多”功能--仿简书_vue展示更多

<template>

<div>

<div class="container faqs layui-fluid">

<div class="layui-row">

<div class="col-xs-16 main">

<div class="category-title">热门问题</div>

<div class="questions">

<a href v-for="index in jun" class="question-title">{{index.topic}}</a>

<a href class="question-title">为什么文章会被锁定？</a>

<a href class="question-title">如果你被封号了？</a>

<a href class="question-title">如何更换绑定的手机号，原有手机号不用了怎么办？</a>

<a href class="question-title">简书官方专题投稿指南大全</a>

<a href class="question-title">公告：简书关注和涨粉的一些说明</a>

<a href class="question-title">关于举报“抄袭类文章”的说明</a>

<a href class="question-title">文章字数统计有问题怎么办</a>

<a href class="question-title">如何在简书进行创作</a>

<a href class="question-title">删除的文章如何找回，有回收站吗？</a>

</div>

<div class="category-title">如何玩转简书</div>

<div class="questions">

<a href v-for="index in jun" class="question-title">{{index.class_name}}</a>

<span>

<a v-loading="loading" v-if="cust" @click="showCont" class="question-title more">

展开全部

<i class="el-icon-arrow-down"></i>

</a>

</span>

 

<div v-if="show">

<a href class="question-title">如何让更多的人看到自己的文章</a>

<a href class="question-title">公告：关于首页投稿专题密集投稿相关问题</a>

<a href class="question-title">如何创建并玩转属于你自己的专题</a>

<a href class="question-title">公告：简书关注和涨粉的一些说明</a>

<a href class="question-title">简书诚邀您开通付费权限</a>

<a href class="question-title">参与“分享有奖计划”，赏金拿到手软！</a>

<a href class="question-title">招募 | 宝玉社群运营培训生</a>

<a href class="question-title">终于等到你，还好我没放弃</a>

</div>

</div>

 

<div class="category-title">简书帐号问题</div>

<div class="questions">

<a v-for="index in jun" href class="question-title">{{index.topic_first}}</a>

 

<span>

<a v-loading="loading" v-if="cust2" @click="showCont2" class="question-title more">

展开全部

<i class="el-icon-arrow-down"></i>

</a>

</span>

 

<div v-if="show2">

<a href class="question-title">我记得简书的昵称，忘记了登录方式怎么办</a>

<a href class="question-title">如何注销简书账号</a>

<a href class="question-title">如何绑定和解绑手机号/邮箱</a>

<a href class="question-title">如果你发现自己帐号里的文章/钱包金额都没了</a>

<a href class="question-title">无法接收短信验证码</a>

<a href class="question-title">多个账号支持合并吗？</a>

<a href class="question-title">绑定账号的时候提示被占用怎么办？</a>

<a href class="question-title">如何更换绑定的手机号，原有手机号不用了怎么办？</a>

</div>

</div>

 

<div class="category-title">身份认证</div>

<div class="questions">

<a href v-for="index in jun" class="question-title">{{index.bookname}}</a>

</div>

 

<div class="category-title">简书帮助中心</div>

<div class="questions">

<a href class="question-title">验证码控件异常问题的错误提示详情</a>

<a href class="question-title">历史版本</a>

<a href class="question-title">上传图片的私密性说明</a>

<span>

<a v-loading="loading" v-if="cust3" @click="showCont3" class="question-title more">

展开全部

<i class="el-icon-arrow-down"></i>

</a>

</span>

 

<div v-if="show3">

<a href class="question-title">我记得简书的昵称，忘记了登录方式怎么办</a>

<a href class="question-title">如何注销简书账号</a>

<a href class="question-title">如何绑定和解绑手机号/邮箱</a>

<a href class="question-title">如果你发现自己帐号里的文章/钱包金额都没了</a>

<a href class="question-title">无法接收短信验证码</a>

<a href class="question-title">多个账号支持合并吗？</a>

<a href class="question-title">绑定账号的时候提示被占用怎么办？</a>

<a href class="question-title">如何更换绑定的手机号，原有手机号不用了怎么办？</a>

</div>

</div>

 

<div class="category-title">有关简书文章的一切</div>

<div class="questions">

<a href class="question-title">添加写文章快捷方式到桌面</a>

<a href class="question-title">文章喜欢数变动说明</a>

<a href class="question-title">如何写一个整洁好看的标题</a>

<span>

<a v-loading="loading" v-if="cust4" @click="showCont4" class="question-title more">

展开全部

<i class="el-icon-arrow-down"></i>

</a>

</span>

 

<div v-if="show4">

<a href class="question-title">文章字数统计有问题怎么办</a>

<a href class="question-title">简书文章代码高亮指南</a>

<a href class="question-title">App 生成图片分享时文章内图片无法显示/邮箱</a>

<a href class="question-title">iOS 版本无法赞赏问题</a>

<a href class="question-title">删除的文章如何找回，有回收站吗？</a>

<a href class="question-title">文章发布后，遇到乱码怎么办？</a>

<a href class="question-title">文章阅读量不高？来投稿简书官方专题吧！</a>

<a href class="question-title">文章列表处的缩略图不显示怎么办？</a>

<a href class="question-title">不想分享小程序怎么办？</a>

</div>

</div>

</div>

 

<div class="col-xs-7 col-xs-offset-1 aside" style="margin-top:60px;">

<div class="go-to-feedback">

<img src="../../../public/images/jun2.png" alt>

<div class="text">

没解决你的疑问？

<a href>

去反馈

<i class="el-icon-arrow-right"></i>

</a>

</div>

</div>

<div class="hint-text">帐户冻结、文章锁定问题，请邮件联系 help@jianshu.com</div>

<div

class="hint-text"

>程序/功能问题、bug 反馈，可添加“简书专题社群委员会委员长”微信号：Jianshu_dama，备注“Web公测”，加群第一时间获得帮助。</div>

<div class="hint-text">

也可以

<a href="/contact">

联系我们

<i class="el-icon-arrow-right"></i>

</a>

</div>

</div>

</div>

</div>

</div>

</template>

 

<script>

export default {

data() {

return {

jun:'',

activeNames: ["1"],

show: false,

show2: false,

cust: true,

cust2: true,

show3: false,

cust3: true,

show4: false,

cust4: true,

loading: false

};

},

created(){

this.axios.get('https://www.apiopen.top/novelApi').then((response) => {

console.log(response.data.data[1]);

this.jun=response.data.data;

console.log(this.jun);

}).catch((error)=>{

console.log(error)

})

},

methods: {

handleChange(val) {

console.log(val);

},

showCont: function() {

this.show = !this.show;

this.cust = !this.cust;

},

showCont2: function() {

this.show2 = !this.show2;

this.cust2 = !this.cust2;

},

showCont3: function() {

this.show3 = !this.show3;

this.cust3 = !this.cust3;

},

showCont4: function() {

this.show4 = !this.show4;

this.cust4 = !this.cust4;

}

},

components: {

nav11

}

};

</script>

 

<style scoped>

* {

box-sizing: border-box;

}

.faqs {

padding: 30px 0;

}

.container {

width: 960px;

margin: 0 auto;

display: flex;

}

.col-xs-16 {

width: 66.66667%;

float: left;

position: relative;

min-height: 1px;

padding-left: 15px;

padding-right: 15px;

}

 

.main .category-title {

margin-bottom: 15px;

padding-left: 10px;

font-size: 20px;

line-height: 1;

color: #333;

border-left: 4px solid #ea6f5a;

}

.questions {

margin-bottom: 30px;

padding: 10px 28px;

border-radius: 6px;

border: 1px solid #d5d5d5;

}

.question-title {

display: block;

padding: 12px 0;

font-size: 15px;

color: #3194d0;

border-bottom: 1px solid #d5d5d5;

}

a {

text-decoration: none;

}

.questions a:hover {

text-decoration: underline;

}

.questions .question-title.more {

text-align: center;

color: #999;

}

.questions .question-title:last-child {

border-bottom: none;

}

.main .questions .question-title {

display: block;

padding: 12px 0;

font-size: 15px;

border-bottom: 1px solid #d5d5d5;

}

a {

cursor: pointer;

}

.faqs .main .questions .question-title:last-child {

border-bottom: none;

}

.question-title:hover {

text-decoration: none;

}

.questions span a:hover {

text-decoration: none;

}

.col-xs-offset-1 {

margin-left: 4.16667%;

}

.col-xs-7 {

float: left;

width: 29.16667%;

}

.go-to-feedback img {

width: 60px;

}

.aside .go-to-feedback .text {

display: inline-block;

margin-left: 10px;

vertical-align: middle;

font-size: 14px;

color: #333;

}

img {

vertical-align: middle;

}

.aside .go-to-feedback .text a {

display: block;

}

.faqs .aside a {

margin-top: 3px;

color: #3194d0;

}

i {

font-size: inherit;

font-style: normal;

font-weight: 600 !important;

}

.aside .hint-text {

margin-top: 30px;

padding-top: 30px;

border-top: 1px solid #f0f0f0;

font-size: 14px;

}

@media (max-width: 768px) {

.col-xs-16 {

width: 100%;

color: black;

height: auto;

}

.col-xs-7 {

width: 100% !important;

padding-right: 32px;

}

.layui-fluid {

width: 100%;

}

.col-xs-offset-1 {

margin-left: 0;

padding-left: 25px;

}

}

</style>