这次给大家带来怎样使用vue实现点击展开点击收起,使用vue实现点击展开点击收起的注意事项有哪些,下面就是实战案例,一起来看一下。
安装vue的步骤在这里就不进行赘述了,下面直接进入正题
首先定义一下data里面的数据:
1 2 3 4 5 6 7 8 | data () {
return {
toLearnList:[
'html' , 'css' , 'javascript' , 'java' , 'php'
],
showAll:false,
}
}
|
Salin selepas log masuk
使用computed对data进行处理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | computed:{
showList: function (){
if (this.showAll == false){
var showList = [];
if (this.toLearnList.length > 3){
for ( var i=0;i<3;i++){
showList.push(this.toLearnList[i])
}
} else {
showList = this.toLearnList
}
return showList;
} else {
return this.toLearnList;
}
},
word: function (){
if (this.showAll == false){
return '点击展开'
} else {
return '点击收起'
}
}
}
|
Salin selepas log masuk
template:循环的时候直接用showList进行操作,显示收起的事件直接用showAll = !showAll 进行控制,改变这个值的真假
1 2 3 4 5 6 | <template>
<p class = "hello" >
<p v- for ='item in showList'>{{item}}</p>
<p @click= "showAll = !showAll" class = "show-more" >{{word}}</p>
</p>
</template>
|
Salin selepas log masuk
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
如何使用Vue2.0调用摄像头进行拍照
怎样处理JS在IE9之前版本中内存泄露
Atas ialah kandungan terperinci 怎样使用vue实现点击展开点击收起. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!