Rumah > hujung hadapan web > tutorial js > 怎样使用vue实现点击展开点击收起

怎样使用vue实现点击展开点击收起

php中世界最好的语言
Lepaskan: 2018-06-01 17:32:29
asal
3206 orang telah melayarinya

这次给大家带来怎样使用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 &#39;点击展开&#39;

   }else{

    return &#39;点击收起&#39;

   }

  }

 }

Salin selepas log masuk

template:循环的时候直接用showList进行操作,显示收起的事件直接用showAll = !showAll 进行控制,改变这个值的真假

1

2

3

4

5

6

<template>

 <p class="hello">

   <p v-for=&#39;item in showList&#39;>{{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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan