vue中怎麼取得元素中的內容

Vue 中取得元素內容的方法有：textContent：取得包含所有文字內容，包括換行符和文字節點。 innerText：取得視覺文字內容，不含換行符和文字節點。 innerHTML：取得所有內容，包括 HTML 程式碼和文字。

Vue 中取得元素內容的方法

在Vue 中，有幾種方法可以取得元素中的內容：

.textContent

.textContent 屬性取得元素中所有包含的文字內容，包括換行符和文字節點。

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.textContent); // 输出：Hello, world!
                                          // This is some text.
    }
  }
</script></code>

.innerText

.innerText 屬性取得元素中可視的文字內容，不包含換行符和文字節點。

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.innerText); // 输出：Hello, world! This is some text.
    }
  }
</script></code>

.innerHTML

.innerHTML 屬性取得元素中所有內容，包括 HTML 程式碼和文字。

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.innerHTML); // 输出：<div id="my-element">
                                          // Hello, world!<br>
                                          // This is some text.
                                          // 
    }
  }
</script></code>

以上是vue中怎麼取得元素中的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！