在Vue中,獲取頁面中的文字是非常常見的操作,比如讀取用戶輸入的表單數(shù)據(jù)或者獲取頁面中特定標簽的元素。下面介紹幾種Vue中獲取文字的方法。
1. 使用雙向綁定獲取用戶輸入的文本框中的文字。
<template>
<div>
<input v-model="inputText" type="text">
<button @click="onButtonClick">獲取文本框文字</button>
</div>
</template>
<script>
export default {
data() {
return {
inputText: ''
}
},
methods: {
onButtonClick() {
console.log(this.inputText)
}
}
}
</script>
2. 使用ref獲取特定元素的文字。
<template>
<div ref="myDiv">Hello World!</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv.innerText)
}
}
</script>
3. 使用computed計算屬性獲取特定元素的文字。
<template>
<div>{{ myText }}</div>
</template>
<script>
export default {
computed: {
myText() {
return document.getElementById('myElement').innerText
}
}
}
</script>