Vue InputNumber 计数器

效果：

父组件：

<template><InputNumber :InputNumberData="InputNumber" :max="10" :min="0"></InputNumber>
</template>import InputNumber from '@/components/InputNumber'
export default {data () {return {InputNumber: 1}},components: {InputNumber}
}
</script><style lang="scss" scoped>
</style>

子组件：

<template><div class="InputNumber"><input type="button" value="-" :disabled="number <= min" @click="number--"><input type="text" v-model.number="number" @blur="outInput"><input type="button" value="+" :disabled="number >= max" @click="number++"></div>
</template><script>
export default {props: [ 'InputNumberData', 'max', 'min' ],data () {return {number: this.InputNumberData}},methods: {outInput () {if (this.number > this.max) this.number = this.maxif (this.number < this.min) this.number = this.min}}
}
</script><style lang="scss" scoped>
input{height:30px;padding:0 10px;}
</style>

Vue InputNumber 计数器相关推荐

Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
Vue获取当前的实时时间+Vue生成计数器
Vue获取当前的实时时间+Vue生成计数器如何使用vue获取当前的实时时间,可以通过**Date():**函数获取当前的时间,但是只能获取当前这一秒的时间,所以需要给他一个延时,每一秒让他刷新一次, ...
InputNumber计数器
InputNumber 计数器仅允许输入标准的数字值,可定义范围要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值.<templat ...
vue Element InputNumber 计数器传参数
当我们在列表中使用InputNumber 这个组件的时候即想要计数器的值,又想给方法传递参数进行操作的时候,就用到了这个,官网文档并么有详细介绍,这里我踩个坑, <div class=&quo ...
vue之计数器实现原理
计数器 <body><div id="app"><button @click="add">+</button>& ...
Vue实例——计数器
在Vue中,若想添加点击事件,需要使用v-on:click进行点击事件的添加.对于v-on:click,可以简写为@click.而点击事件的内容可以为具体的代码或者是函数. 在Vue中,定义函数需要n ...
vue案例-计数器.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue实现计数器的学习笔记
效果图如下: 点击加号技术开始加1,点击减号计数开始减1 源代码如下: 实现了两种方式,1种直接修改变量值,一种调用函数 <!DOCTYPE html> <html lang=&qu ...
【element】InputNumber计数器动态渲染设置默认值后加减号失效问题
今天同事遇到了一个问题,遍历一个数组,在页面上渲染n个计数器,计数器的初始值为0. 上图为el-input绑定的值. 一开始是直接赋值,结果导致加减号失效.后来百度后发现需要使用this.￥set,至 ...

Vue InputNumber 计数器

Vue InputNumber 计数器相关推荐

最新文章

热门文章