小程序--log居中 失焦获取表单中的值

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 小程序--log居中 失焦获取表单中的值

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, )
  },

1425695-20191210205347902-681844081.png


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
6月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
156 0
|
1月前
|
JSON 数据可视化 小程序
uview/小程序可视化表单代码生成器文档
uview/小程序可视化表单代码生成器文档
28 0
|
4月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
86 0
|
数据采集 小程序
微信小程序的动态表单,实现房屋租赁的多租客录入(一)
微信小程序的动态表单,实现房屋租赁的多租客录入
224 0
|
6月前
|
小程序 JavaScript
小程序表单组件——button
小程序表单组件——button
69 0
|
小程序 前端开发 JavaScript
小程序提交form表单
微信小程序提交form表单内容
91 0
|
小程序
微信小程序表单获取神器
微信小程序表单获取神器
微信小程序表单获取神器
|
小程序 数据安全/隐私保护
小程序封装form表单
本文主要介绍了如何封装一个表单组件,在封装表单组件时,我们需要定义组件属性和方法、组件模板和组件样式,以确保组件能够在页面中正常使用。通过本文的介绍,希望能够更好地帮助大家理解表单组件的封装方式,并在实际项目中应用。
217 0
|
移动开发 小程序 开发者
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
218 0
下一篇
无影云桌面