Vuejs如何使用innerHtml更改元素內容

Question

您好，我想知道單擊按鈕時如何更改<h3 id="score"> innerHtml 。

在 Vanilla Javascript 中，我可以通過以下方式訪問元素：

const score = document.querySelector('#score');

並通過這樣做來改變它：

score.innerHtml = "13";

類似的東西。

<template>
  <div id="scoreboard">
    <h4>{{header_my}}</h4>
    <button v-on:click="changeH3()">Change</button>
    <h3 id="score">0</h3>
  </div>
</template>

<script>
export default {
  name: "scoreboard",
  data() {
    return {
      header_my: "Hello Wolrd"
    };
  },
  methods: {
    changeH3() {
      const h3 = document.querySelector("#score");
      h3.innerHtml = "12";
    }
  }
};
</script>

當changeH3時，我該怎么做？ id為score的h3的innerHtml必須更改為12 。

Answer 1

使用 Vue.js 時不應直接操作 DOM。 首先定義score數據屬性。 Vue 知道您何時更改score ，並將進行 DOM 操作以更新視圖。

 new Vue({ el: "#scoreboard", data() { return { header_my: "Hello Wolrd", score: 0 }; }, methods: { changeScore() { this.score = 12; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="scoreboard"> <button @click="changeScore">Change</button> <h3>{{ score }}</h3> </div>

Answer 2

您好，我想知道單擊按鈕時如何更改<h3 id="score"> innerHtml 。

在Vanilla Javascript中，我可以通過以下方式訪問元素：

const score = document.querySelector('#score');

並通過執行以下操作對其進行更改：

score.innerHtml = "13";

這樣的事情。

<template>
  <div id="scoreboard">
    <h4>{{header_my}}</h4>
    <button v-on:click="changeH3()">Change</button>
    <h3 id="score">0</h3>
  </div>
</template>

<script>
export default {
  name: "scoreboard",
  data() {
    return {
      header_my: "Hello Wolrd"
    };
  },
  methods: {
    changeH3() {
      const h3 = document.querySelector("#score");
      h3.innerHtml = "12";
    }
  }
};
</script>

調用changeH3時，該怎么辦？ 該innerHtml的h3與id的score必須改變，以12 。

Answer 3

就像這樣它完成了：

let html = "<b>some text</b>"  
<div v-html="html" />