关于如何利用计算属性进行button的控制

element分页没用它的 (这个只要上一页下一页),比如共2页的时候,你在第一页,你肯定可以点击下一页,当你进入到第二页的时候这个button肯定就不能点击了啊,它的属性diaabled=true让他不能点击
实现方法就是用的computed
示例代码如下
<div class="page">
<span class="first-sapn">共<span style="color: #FF795E">{{totalNum}}</span>件商品</span>
<el-button>上一页</el-button>
<el-button type="primary" @click="nextPage" :disabled="isdisabledFn">下一页</el-button>
<span class="last-sapn">共<span style="color: #FF795E">{{total}}</span>页</span>
</div>


上面这张图是后端只返回了一个size(总共好多条数据),根据这个自己去计算有好多页Math.ceil(size/每页显示多少条)
// 点击下一页
nextPage(){
console.log(222)
if(this.page<this.total){
this.page++ }else {
this.next=true
} }
==============关键的计算属性来了=====================
computed:{
isdisabledFn(){
if(this.page<this.total){
return this.next=false
}else {
return this.next=true
}
},
},
关于如何利用计算属性进行button的控制的更多相关文章
- vue利用计算属性做(展开收起)小例子
<template> <div class="wrap"> <div class="box"> <div v-for= ...
- vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性
4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...
- vue计算属性详解
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
随机推荐
- 主席树||可持久化线段树||BZOJ 3524: [Poi2014]Couriers||BZOJ 2223: [Coci 2009]PATULJCI||Luogu P3567 [POI2014]KUR-Couriers
题目:[POI2014]KUR-Couriers 题解: 要求出现次数大于(R-L+1)/2的数,这样的数最多只有一个.我们对序列做主席树,每个节点记录出现的次数和(sum).(这里忽略版本差值问题) ...
- vue项目打包后一片空白及资源引入的路径报错解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- HDU 4699 - Editor - [对顶栈]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4699 Problem Description Sample Input8I 2I -1I 1Q 3LD ...
- [No0000116]SQLServer启用sa账户
SQLServer如何启用sa账户,今天在这里唠叨一下关于SQL Server数据库如何启用sa账户的,作为一个数据库管理者,需要非常熟练掌握,具体步骤如下: 1.先登录数据库服务 首先在“开始”菜单 ...
- Vue.js最佳实践
Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...
- 【待补】splay 模板
#define _CRT_SECURE_NO_WARNINGS #include<cmath> #include<iostream> #include<stdio.h&g ...
- SQL Server 2008 事件探查器(SQL SERVER Profiler)
要想很好地优化ERP系统,可以从客户端.服务器.网络等入手,对于我们M1系统的优化来说,SQL 语句的优化就起到很重要的作用了.为此,我们展开,学习了SQL SERVER 2008的事件探查器(SQL ...
- Flink – WindowedStream
在WindowedStream上可以执行,如reduce,aggregate,min,max等操作 关键是要理解windowOperator对KVState的运用,因为window是用它来存储wind ...
- 用2个DATETIMEPICKER分别输入时间和日期,再合并成一个DATETIME类型
DtpDate为日期的,DtpTime为时间的 StrToDateTime(FormatDateTime('yyyy-MM-dd', DtpDate.Date) + ' ' + TimeToStr(D ...
- falsk 与 django 钩子方法
falsk 四大钩子方法# 在第一次请求之前调用@app.before_first_requestdef before_first_request(): print("这是第一次请求之前调用 ...