<div id="app">
      <!-- 插值語(yǔ)法表達(dá)式直接進(jìn)行拼接 -->
      <!-- 1.拼接姓名 -->
      <h2>{{fullname}}</h2>
      <!-- 2.顯示分?jǐn)?shù)及格或不及格 -->
      <h2>{{scorelevel}}</h2>
      <!-- 3.反轉(zhuǎn)單詞 -->
      <!-- reverse針對(duì)于數(shù)組，先用split轉(zhuǎn)為數(shù)組，在用reverse -->
      <h2>{{reversetext}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // name
            firstName: "kk",
            lastName: "cc",
            // score
            score: 99,
            // 文本中單詞反轉(zhuǎn)
            message: "I love stydy Vue3",
          };
        },
        computed: {
          fullname() {
            return this.firstName + " " + this.lastName;
          },
          scorelevel() {
            return this.score >= 60 ? "及格" : "不及格";
          },
          reversetext() {
            return this.message.split(" ").reverse().join(" ");
          },
        },
      });
      app.mount("#app");

computed: {
          // 語(yǔ)法糖
          fullname() {
            return this.firstname + " " + this.lastname;
          },
          // 完整寫法
          fullname: {
            get: function () {
              return this.firstname + " " + this.lastname;
            },
            set: function (value) {
              const names = value.split(" ");
              this.firstname = names[0];
              this.lastname = names[1];
            },
          },