介绍 vue是什么 data (), {
return {才能
,,toLearnList:(
,,,& # 39;html # 39; & # 39; css # 39;, & # 39; javascript # 39; & # 39; java # 39;, & # 39; php # 39;,,//进行显示的数据
,,,,
,,showAll:假的,,//标记数据是否需要完全显示的属性
,,}
以前,} 计算:{
showList才能:函数(){
,,如果(this.showAll ==, false){,,,,,,,,,//当数据不需要完全显示的时候
,,,var showList =, [];,//定义一个空数组
,,,如果(祝辞this.toLearnList.length 3){//这里我们先显示前三个
,,,,,(var 我=0;i<3,我+ +){
,,,,,showList.push (this.toLearnList[我])
,,,,}
还有,,,}{
,,,,showList =this.toLearnList
,,,}
,,,return showList;,//返回当前数组
其他,,}{
,,,return this.toLearnList;
,,}
,,},
词:才能函数(){
,,如果(this.showAll ==, false){//对文字进行处理
,,,return & # 39;点击展开& # 39;
其他,,}{
,,,return & # 39;点击收起& # 39;
,,}
,,}
以前,} & lt; template>
,& lt; div 类=癶ello"比;
,,& lt; div v=& # 39; item 拷贝showList& # 39;在{{项}}& lt;/div>
,,& lt; div @click=皊howAll =, ! showAll",类=皊how-more"在{{词}}& lt;/div>
,& lt;/div>
& lt;/template>
这篇文章主要介绍vue怎么实现点击展开点击收起效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
,首先定义一下数据里面的数据:
,使用计算对数据进行处理:
模板:循环的时候直接用showList进行操作,显示收起的事件直接用showAll=! showAll进行控制,改变这个值的真假
以上是“vue怎么实现点击展开点击收起效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
