value="{{username}}" 绑定值 值在js文件的data中
pa==>Vant-Weap中表单中的值,不是双向绑定的。 你获取值后, 值并没有在对用的data中,你要赋值到data里。
设置值是 通过 this.setData({ usertel: event.detail.value })
通过事件获取值。 准确的说是通过事件名中的参数event来获取值
bind:blur="getname" 这是失焦事件 使用的是blur
bindtap="getalldata" 点击 下压的时候就会触发
<!-- log图 --> <view class='header-top'> <image class='imglog' src='../../imgs/log.png'></image> </view> <view class='form-box'> <van-cell-group class="username-box"> <van-field value="{{username}}" label="姓名" placeholder="请输入您的姓名" bind:blur="getname" class='nextnext' /> <van-field value="{{usertel}}" label="手机号" placeholder="请输入您的手机号" bind:blur="gettel" class='nextnext' /> </van-cell-group> <van-button type="primary" size="large" color="linear-gradient(to right, #4bb0ff, #6149f6)" bindtap="getalldata"> 提交 </van-button> </view>
/* 姓名部分 css */ /* 按钮距离左右有间距 直接在按钮外层嵌套一个view 然后使用padding:auto 10px 就可以了 */ .form-box{ padding-left: 10px; padding-right: 10px; } /* 如何让van-field距离上下有间距,你要作用在原生的元素(view)上才有作用 .field-index--van-field 这个类是作用在view身上的 所以才有用 只有作用在view(原生上的元素-----才有用的) */ .username-box .field-index--van-field{ margin: 30px auto; }
js 事件名 直接写在js文件中就可以了 不需要添加什么 跟vue不同哈
data: { username:"", usertel:"", }, // 获取姓名 getname(event) { console.log("失去焦点获取的姓名",event.detail.value);//获取值 // 设置值 this.setData({ username: event.detail.value }) }, // 获取手机号 gettel(event){ console.log(event);//可以获取这个事件有关的值 console.log("失去焦点获取的手机号", event.detail.value);//获取值 // 设置值 this.setData({ usertel: event.detail.value }) }, getalldata(){ console.log("点击按钮获取的值", this.data.username, this.data.usertel, ) },