How to get the content of an element in vue

The methods to obtain element content in Vue are: textContent: Get all text content, including line breaks and text nodes. innerText: Get the visual text content, excluding line breaks and text nodes. innerHTML: Gets all content, including HTML code and text.

Methods to get the content of elements in Vue

In Vue, there are several ways to get the content of elements:

.textContent

.textContent property gets all the text content contained in the element, including line breaks and text nodes.

<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 The property gets the visible text content in the element, excluding line breaks and text nodes. The

<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 property gets all the content in the element, including HTML code and text.

<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>

The above is the detailed content of How to get the content of an element in vue. For more information, please follow other related articles on the PHP Chinese website!