vue.js实现自定义输入分页

效果如下:

html:

<input type="text" value="1" v-model="page.page_my_selected" @blur="onBlur">

js:

dara(){
    return {
         page:{page_my_selected:1}
    }
}

onBlur() {
      if (
        this.page.page_my_selected == null ||
        this.page.page_my_selected == undefined ||
        this.page.page_my_selected == ""
      ) {
        this.page.page_my_selected = 1;
      }
      let reg = /^\d+$/;
      // 输入字符串
      if (!reg.test(this.page.page_my_selected)) {
        if (reg.test(this.page.page_my_selected.substr(0, 1))) {
          this.page.page_my_selected = parseInt(this.page.page_my_selected);
        } else {
          this.page.page_my_selected = 1;
        }
      }
      /    / console.log(reg.test(this.page.page_my_selected))
    },

原文地址:https://www.cnblogs.com/cap-rq/p/10294718.html

时间: 2024-08-28 07:50:04

vue.js实现自定义输入分页的相关文章

vue.js 处理用户输入

为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法: <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">更改消息</button> </div> var app5 = new Vue({ el: '#app-5', data: { me

在老项目中单独引入vue.js,使用自定义指令

转发https://www.jb51.net/article/138594.htm 转发https://www.cnblogs.com/yszblog/p/11694256.html 原文地址:https://www.cnblogs.com/hyqd/p/12173335.html

Vue.js:轻量高效的前端组件化方案(转载)

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发

浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

Vue.js小案例(2)

即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] { display: none; } *{ margin:0; padding:0; } body{ font-family:Microsoft YaHei; text-align:center; } li{ list-style:none; } .bar{ background-color:#5

Vue.js与angular在数据实现的思考

Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架,MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angular的指令机制:用户可以通过具有特殊前缀的HTML 属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定: <!-- 指令 -->

Vue.js 综合

<!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <input v-model="newTodo" v-on:keyup.ent

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">