uni-app使用v-model

v-model 介绍

首先明确一点，v-model仅仅是语法糖。

<input type="text" v-model="something">

等价于

  <input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

它将一个较复杂的input双向数据绑定简化了他的书写方式。

微信小程序绑定input

最开始我是使用微信推荐的写法

<input bindtap="input" />

然后在js里面解析event，然后再setData

uni-app下v-model的写法

本文采用uni-app自定义组件模式

wxml

...
<form @submit="formSubmit" @reset="formReset" :model="formItem" class="tm-every-center padding bg-white">
					<view class="section flex align-center">
						<view class="section__title">姓名：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.name" />
					</view>
					<view class="section flex align-center">
						<view class="section__title">手机：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.phone" />
					</view>
					<view class="section flex align-center">
						<view class="section__title">赛点：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.competition" />
					</view>
					<view class="btn-area margin-top"><button formType="submit" class="cu-btn">提交</button></view>
				</form>
				...

然后在data里面设置

formItem: {
				name:'',
				phone:'',
				competition: ''
			}

在submit事件回调里面就可以这样写

submit(){
	this.$api.post(formItem).then(res => {
	})
}

完美解决微信小程序input书写过程冗余的情况。

版权声明: （https://www.thinkmoon.cn/post/313）
本文首发于指尖魔法屋-uni-app使用v-model
转载或引用必须申明原指尖魔法屋来源及源地址！