如何仅在按钮被单击时返回变量的值？

<button id="myButton">点击按钮</button>

document.getElementById("myButton").addEventListener("click", function() {
  var myVariable = "这是变量的值";
  console.log(myVariable);
});

import React, { useState } from "react";

function MyComponent() {
  const [myVariable, setMyVariable] = useState("");

  const handleClick = () => {
    setMyVariable("这是变量的值");
  };

  return (
    <div>
      <button onClick={handleClick}>点击按钮</button>
      <p>{myVariable}</p>
    </div>
  );
}

new Vue({
  el: "#app",
  data: {
    myVariable: ""
  },
  methods: {
    handleClick: function() {
      this.myVariable = "这是变量的值";
    }
  }
});

<div id="app">
  <button @click="handleClick">点击按钮</button>
  <p>{{ myVariable }}</p>
</div>