vue利用计算属性做(展开收起)小例子
<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>
vue利用计算属性做(展开收起)小例子的更多相关文章
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- 3. Vue语法--计算属性
一. 计算属性 1. 什么是计算属性? 通常, 我们是在模板中, 通过插值语法显示data的内容, 但有时候我们可能需要在{{}}里添加一些计算, 然后在展示出来数据. 这时我们可以使用到计算属性 先 ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
随机推荐
- cassandra cpp driver中bind list——用cass_statement_bind_collection函数
CassError insert_into_collections(CassSession* session, const char* key, const char* items[]) { Cass ...
- Linux系统的方法论
Linux系统的方法论 https://www.cnblogs.com/youxia/p/LinuxDesktop001.html 阅读目录 特别说明 什么情况下适合玩Linux桌面 Linux桌面系 ...
- HAOI2012高速公路——子区间计算
题目:https://www.luogu.org/problemnew/show/P2221 似乎按点来算贡献很方便,但我抱住一篇没有这样的题解磕了两天... 以下转载: 题意:维护一段数列 支持区间 ...
- bzoj1222
奇怪的dp 思路清奇 dp[i][j]表示当前做完了i个任务,1机器花了j秒,2机器花费的最少时间,然后转移就行了. #include<bits/stdc++.h> using names ...
- 【旧文章搬运】从PEB获取内存中模块列表
原文发表于百度空间,2008-7-25========================================================================== PEB中的L ...
- E20180408-hm
interaction n. 互动; 一起活动; 合作; 互相影响; interface n. 界面; <计>接口; 交界面; v. (使通过界面或接口) 接合,连接; [计算机] ...
- css里关于浏览器的前缀
今天遇到一个比较坑爹的 -moz-box-sizing: border-box; box-sizing' border-box; 一下子有点懵逼,第一个什么鬼??一查,原来是火狐浏览器的前缀.应该 ...
- SCUT - 243 - 宝华复习 - 二分 - 桶计数
https://scut.online/p/243 这道题唯一难点在于如何快速确定m合法.可以统计滑动窗口中已有元素的数量. #include<bits/stdc++.h> using n ...
- 关于国债的一些计算: 理论TF价格2(缴款日前有付息)
计算 ExpectedTFPrice 是一个比较复杂的计算,我们这里讨论复杂的一种情况. 给定一只可交割国债bond(一般为CTD),一个国债期货tf, 在t日(表示tf的一个交易日期,我们通过bon ...
- 项目中java异常处理
一.java异常类介绍. Throwable: 有两个重要的子类:Exception(异常)和 Error(错误),二者都是 Java 异常处理的重要子类,各自都包含大量子类. 有一篇比较好的blog ...