小程序--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, )

  },

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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