- <template>
- <div class="wrap">
- <div class="box">
- <div v-for="item in showItem">{{item}}</div>
- <div @click="showAll = !showAll">{{btnText}}</div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- foodList: [
- "苹果", "香蕉", "橙子", "葡萄", "橘子" ,"柚子","柿子" // 进行显示的数据
- ],
- showAll: false // 标记数据是否需要完全显示的属性
- }
- },
- computed: {
- showItem() {
- if (this.showAll == false) { // 当数据不需要完全显示的时候
- var showItem = []; // 定义一个空数组
- if (this.foodList.length> 4) { // 这里我们先显示前四个
- for (var i = 0; i <4; i++) {
- showItem.push(this.foodList[i])
- }
- } else {
- showItem = this.foodList
- }
- return showItem; // 返回当前数组
- } else {
- return this.foodList;
- }
- },
- btnText() {
- if (this.showAll == false) { // 对文字进行处理 (枚举)
- return "展开全部"
- } else {
- return "收起"
- }
- }
- }
- }
- </script>
- <style lang="sCSS" scoped>
- </style>
来源: http://www.bubuko.com/infodetail-2566326.html