uniapp-获取input输入内容

说明

在这里插入图片描述

<input class="in-phnoe" @input="inputData"  v-model="phone" focus />
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				title: 'Hello',
				flag: false,
				phone: '社区人员'
			}
		},
		onLoad() {},
methods: {
			inputData(e) {
				this.phone = e.detail.value
			},
			// 单选框点击事件
			checkboxChange() {

				if (this.flag === false) this.flag = true
				else {
					this.flag = false
				}
				console.log('触发单选框点击事件' + this.flag)
			},
			// 测试接口数据
			getdata() {
				console.log(this.phone)

@input=“inputData” 获取数据的关键 v-model是绑定Input输入框内容和return中定义的phone

inputData(e) {
				this.phone = e.detail.value
			},
e.detail.value是关键  不可写错
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在uniapp中实现输入提示效果,可以使用`<input>`组件的`@input`事件和`<popup>`组件。 首先,在`<template>`中创建一个`<input>`和一个`<popup>`: ```html <template> <div> <input type="text" @input="handleInput" placeholder="请输入内容" /> <popup v-model="showPopup"> <view class="popup-content"> <view v-for="(item, index) in suggestions" :key="index" @click="handleSuggestionClick(item)"> {{ item }} </view> </view> </popup> </div> </template> ``` 然后,在`<script>`中定义`data`和几个方法: ```javascript <script> export default { data() { return { showPopup: false, suggestions: [], // 输入提示列表 inputValue: '' // 输入框的 } }, methods: { handleInput(event) { const value = event.target.value this.inputValue = value // 更新输入框的 // 发送请求获取输入提示列表 // 这里可以根据实际情况调用后端接口或者本地数据 this.getSuggestions(value) }, getSuggestions(value) { // 根据输入框的获取输入提示列表 // 这里只是一个示例,实际情况可能需要进行debounce或throttle this.suggestions = ['提示1', '提示2', '提示3'].filter(item => item.includes(value)) // 根据输入提示列表的长度来控制popup的显示和隐藏 this.showPopup = this.suggestions.length > 0 }, handleSuggestionClick(value) { this.inputValue = value // 点击提示项后更新输入框的 this.showPopup = false // 隐藏popup } } } </script> ``` 在`handleInput`方法中,通过发送请求获取输入提示列表,并根据列表的长度来控制`<popup>`的显示和隐藏。 在`handleSuggestionClick`方法中,点击提示项后更新输入框的,并隐藏`<popup>`。 最后,在`<style>`中定义`<popup>`的样式: ```css <style> .popup-content { display: flex; flex-direction: column; background-color: #fff; border-radius: 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); padding: 10rpx; max-height: 300rpx; overflow-y: auto; } .popup-content > view { font-size: 28rpx; color: #333; line-height: 50rpx; text-align: center; border-bottom: 1px solid #eee; cursor: pointer; } .popup-content > view:last-child { border-bottom: none; } </style> ``` 以上就是在uniapp中实现输入提示效果的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值