关于如何利用计算属性进行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 ...
随机推荐
- CCPC-Wannafly Winter Camp Day3 Div1 - 排列
题目链接:https://zhixincode.com/contest/14/problem/A?problem_id=203 time limit per test: 1 secondmemory ...
- linux 编程
edit skill: 1. i:当前光标前插入 2. a:当前光标后插入 3. SHIFT+a—行尾插入 4. SHIFT+i—行首插入 5. o—>下一行插入 6. SHIFT+o--上一行 ...
- PHP之Boolean
Boolean布尔类型 这是最简单的类型.Boolean表达了真值,可以为true或者false. 语法 要指定一个布尔值,使用常量true或者false,两个都不区分大小写. 通常运算符所返回的Bo ...
- [development] __attribute__((weak))是干嘛的
简单的说,就是当发生 “重复定义的时候”.被声明者会被冲突者覆盖掉. 这里还涉及了weak与alias连用的情况. 参见,里边有两个例子,很浅显易懂. https://my.oschina.net/s ...
- day1_接口测试基础
一.什么是接口: 接口:一般分为两种,程序内部接口和程序对外接口 系统对外接口:系统与外部沟通,比如我们平时用的app,网站进行数据处理的时候都是通过接口调用后端服务器的数据. 程序内部接口:程序内部 ...
- Jenkins 忘记admin用户名以及密码
1.进入 如果安装的war包,路劲如下: C:\Users\LENOVO\.jenkins\ 2. 1)方式一: 打开config.xml ->将useSecurity设置为false 2)方 ...
- elastic search范围查询
queryBuilder.must(QueryBuilders.rangeQuery("pt_longitude").from(minLongitude).to(maxLongit ...
- Django实现邮件发送功能
首先申请邮箱并在设置中申请到授权码,授权码的目的仅仅是让你有权限发邮件,但是不能登录到邮箱进行修改,发送邮件时,可以代替密码 1,配置文件settings.py #邮件服务配置文件 EMAIL_USE ...
- .net core开发工具与SDK
一.开发工具 开发工具使用Visual Studio 2017 下载官网:https://visualstudio.microsoft.com/zh-hans/vs/ 相关的安装已经有很多文章介绍过, ...
- oracle日志归档空间清理
进入机器,设置环境变量,如: export ORACLE_HOME=/main/app/oracle/product//db_1 export ORACLE_SID=devdb 然后切换oracle用 ...