javascript - 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 时，我该怎么做？叫做？ innerHtml的h3与 id的score必须更改为12 .

Answer 1

就像这样就完成了:

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