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的控制的更多相关文章

  1. vue利用计算属性做(展开收起)小例子

    <template> <div class="wrap"> <div class="box"> <div v-for= ...

  2. vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

    有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...

  3. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  4. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  5. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  6. Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性

    4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...

  7. vue计算属性详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  8. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  9. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

随机推荐

  1. ROS rosrun 调用 sudo 命令

    https://blog.csdn.net/qq_16775293/article/details/81138904

  2. [No000012B]WPF(3/7)有趣的边框和画刷[译]

    介绍 边框是每个WPF程序的主要构成块.在我现在的程序中,我使用了很多的边框来装饰界面.从把边框直接放到窗口中到把边框放到控件模板和列表项中,边框在创建一个好的应用界面上扮演了一个非常重要的角色.在这 ...

  3. [No0000CA]什么是“普瑞马法则”?以及 如何利用“普瑞马法则”,三步克服惰性

    一般在学习和生活中,我们都可能有这样的经验,就是当说想要作某件事情的时候,但过了好久发现还是没有做:或者觉得有力气使不出来:或者总觉得生活是灰色和抑郁的等等. 这类情况反映在生活中,就是生活好像总是被 ...

  4. day2:day1作业 字符编码

    1,使用while循环输出1,2,3,4,5,6,8,9 # 使用while循环输出1,2,3,4,5,6,8,9 num = 1 while num <= 10: if num != 7: p ...

  5. saltstack安装配置使用记录

    安装 参考 http://docs.saltstack.cn/topics/installation/index.html#installation 选择对应的OS 配置 环境如下: master:1 ...

  6. php之运算符

    运算符优先级相同,运算符的结合方向决定了该如何运算, 一.运算符优先级 组合方向 运算符 附加信息 无 clone new clone和new 左 [ array 右 ** 算术运算符 右 ++ -- ...

  7. xcode工程编译错误:一般错误总结

    1.Apple LLVM 8.0 Error Group /’all-product-headers.yaml’ not found 最近升级了xcode打包后出现了个BUG,记录解决的方法. 现象: ...

  8. kafka实战读书笔记

    1.katka_2.12-l.0.0.tgz 上面两个文件中的 2.11 /2.12 分别表示编译 Kafka 的 Scala 语言版本,后面的 1.0 .0 是 Kafka的版本 . 2.kafka ...

  9. day2_抓包-抓包工具Charles

    1.Charles功能简单描述 1)定位问题,前端的.后端的问题 2)发出去的请求,请求头.请求体,返回的数据 3)拦截请求,修改请求 2.Charles抓包(Android手机) 1.要求手机得和你 ...

  10. SQL Server 2008 R2提示评估期已过

    解决SQL Server 2008 r2提示评估期已过 1.注册表把 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SQL Server\100\Co ...