uniapp中如何获取text的值

242 阅读 0 评论 160 点赞

我是靠谱客的博主背后画笔，这篇文章主要介绍uniapp中如何获取text的值，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。

推荐（免费）：uni-app开发教程

uniapp中获取text值的方法：

1、写文本框

复制代码<view class="b-input-button">
<view class="askQue" v-if="$store.state.wz.dzaskQuestion">
<input type="text" @input="onInput" placeholder="请输入..." v-model="inputcontent" :value="inputcontent" class="b-askQue-input" />
</view>
<button @click="send" class="b-button">确定</button>
</view>1
2
3
4
5
6
<view class="b-input-button">
<view class="askQue" v-if="$store.state.wz.dzaskQuestion">
<input type="text" @input="onInput" placeholder="请输入..." v-model="inputcontent" :value="inputcontent" class="b-askQue-input" />
</view>
<button @click="send" class="b-button">确定</button>
</view>
登录后复制

2、data中定义一个inputcontent

复制代码data() {
return {
inputcontent:'',//输入内容
};
},1
2
3
4
5
data() {
return {
inputcontent:'',//输入内容
};
},
登录后复制

3、在methods中写事件

复制代码 //获取input文本框中的输入值
onInput(e){
    this.inputcontent = e.target.value
},
/**
* 触发确定按钮
*/
send() {
let valsrc = '';
let valadd = '';
valsrc = this.inputcontent;
if (!valsrc) {
uni.showToast({
    title:"请输入...", 
duration: 2000
})
return;
}
 
valadd = valsrc;
this.inputcontent = '';
this.$store.commit('updateDzQuestionNum', -4);
this.show(false, valadd);
},1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//获取input文本框中的输入值
onInput(e){
    this.inputcontent = e.target.value
},
/**
* 触发确定按钮
*/
send() {
let valsrc = '';
let valadd = '';
valsrc = this.inputcontent;
if (!valsrc) {
uni.showToast({
    title:"请输入...", 
duration: 2000
})
return;
}
 
valadd = valsrc;
this.inputcontent = '';
this.$store.commit('updateDzQuestionNum', -4);
this.show(false, valadd);
},
登录后复制