uniapp怎么获取text里的内容

uniapp获取text里的内容

在开发Uni-app的过程中，我们经常需要从用户输入的文本框或者页面中获取文本内容进行处理或者展示。本文将会讲解如何在Uni-app中获取text里的内容。

1. 获取input框输入的内容

在Uni-app中，我们可以使用`v-model`绑定`input`框的输入内容，然后在`data`中定义对应的变量来获取输入的内容。

//html代码
<template>
  <view>
    <input v-model="inputValue" />
    <button type="primary" @click="getInputValue">获取输入的值</button>
  </view>
</template>
//Js代码
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    getInputValue() {
      console.log(this.inputValue)
    }
  }
}
</script>

在上述代码中，我们定义了一个`inputValue`变量来保存输入框的值。在`getInputValue`方法中，我们可以通过`this.inputValue`来获取输入框的值。

2. 获取文本框输入的内容

在Uni-app中，我们可以使用<textarea>标签来创建多行文本框，并通过`v-model`指令将其绑定到data中相应的变量上，然后在js中使用该变量来获取文本框输入的内容。

//html代码
<template>
  <view>
    <textarea v-model="textValue"></textarea>
    <button type="primary" @click="getTextValue">获取输入的值</button>
  </view>
</template>
//Js代码
<script>
export default {
  data() {
    return {
      textValue: ''
    }
  },
  methods: {
    getTextValue() {
      console.log(this.textValue)
    }
  }
}
</script>

在上述代码中，我们定义了一个`textValue`变量来保存文本框的值。在`getTextValue`方法中，我们可以通过`this.textValue`来获取文本框的值。

3. 获取其他元素的内容

除了`input`框和`textarea`文本框，Uni-app中还有其他元素，比如``标签、<div>标签等。对于这些元素，我们可以通过以下两种方法来获取其中的内容。

方法一：使用`ref`属性

我们可以在html中的元素上添加`ref`属性，然后在js中通过`this.$refs`来获取该元素的引用，最后使用`.innerText`来获取文本内容。

//html代码
<template>
  <view>
    <p ref="myParagraph">这是一个段落</p>
    <button type="primary" @click="getParagraph">获取段落内容</button>
  </view>
</template>
//Js代码
<script>
export default {
  methods: {
    getParagraph() {
      const paragraphContent = this.$refs.myParagraph.innerText
      console.log(paragraphContent)
    }
  }
}
</script>

在上述代码中，我们为``标签添加了`ref="myParagraph"`属性，然后在JS中使用`this.$refs.myParagraph`来获取该标签的引用，最后使用`.innerText`来获取标签中的文本内容。

方法二：使用`querySelector`方法

我们可以使用JS原生的`querySelector`方法来获取任意元素的引用，然后使用`innerText`属性来获取其文本内容。

//html代码
<template>
  <view>
    <p id="myParagraph">这是一个段落</p>
    <button type="primary" @click="getParagraph">获取段落内容</button>
  </view>
</template>
//Js代码
<script>
export default {
  methods: {
    getParagraph() {
      const paragraphContent = document.querySelector('#myParagraph').innerText
      console.log(paragraphContent)
    }
  }
}
</script>

在上述代码中，我们为``标签添加了`id="myParagraph"`属性，然后在JS中使用`document.querySelector('#myParagraph')`来获取该标签的引用，最后使用`.innerText`来获取标签中的文本内容。

4. 总结

在Uni-app中，获取文本内容并不困难，我们可以使用`v-model`指令来绑定`input`框和`textarea`文本框，也可以使用`ref`属性或者`querySelector`方法来获取其他元素的引用和文本内容。希望本文对您有所帮助。