uniapp组件-uni-number-box数字输入框

朱雀 2021-07-25 14:50 653阅读 0赞

官网示例：[https://ext.dcloud.net.cn/plugin?id=31][https_ext.dcloud.net.cn_plugin_id_31]

数字输入框组件多用于购物车加减商品等场景

## 一、基本属性 ##

![20210301214917469.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 二、双向绑定、事件 ##

![20210301215109250.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view class="page">
    		<uni-section :title="'绑定value的方式 : '+ numberValue" type="line"/>
    		<uni-number-box :value="numberValue" @change="change" />
    		<uni-section :title="'使用v-model的方式 : '+ vModelValue" type="line"/>
    		<uni-number-box v-model="vModelValue" />
    	</view>
    </template>
    <script>
    	export default {
    		components: {},
    		data() {
    			return {
    				numberValue: 0,
    				vModelValue: 3
    			}
    		},
    		methods: {
    			change(value) {
    				this.numberValue = value
    			}
    		}
    	}
    </script>

[https_ext.dcloud.net.cn_plugin_id_31]: https://ext.dcloud.net.cn/plugin?id=31
[20210301214917469.gif]: https://img-blog.csdnimg.cn/20210301214917469.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210301214958156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210301215109250.gif]: https://img-blog.csdnimg.cn/20210301215109250.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210301215139676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70