<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [TOC] >[success] # 編寫字符串反轉和內容隱藏功能 接下來用vue做兩個簡單的小 **demo** ,為了讓初學者更好的理解 **vue** 語法 >[success] ## 字符串反轉功能 **需求** : 用 **vue** 實現 **點擊按鈕** 時, **反轉** 文字內容,例如: **123** 點擊后反轉成 **321** 的這么一個小效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>反轉字符串</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 創建vue實例 Vue.createApp({ data(){ return{ content: 'hello world' // 定義變量 } }, methods: { handleBtnClick(){ // 反轉過后轉換成字符串 const newContent = this.content.split('').reverse().join('') // 重新賦值給頁面元素 this.content = newContent } }, template: ` <div> {{content}} <button v-on:click="handleBtnClick">反轉</button> </div> ` // 在標簽中使用變量 }).mount('#root') // 將template中的內容掛載到id為root的元素中 </script> </html> ~~~ >[success] ## 內容隱藏功能 **需求** :通過 **點擊按鈕** 實現 **顯示隱藏** 文字的 **開關** 的一個小功能。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>內容隱藏功能</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 創建vue實例 Vue.createApp({ data(){ return{ show: true, // 定義變量控制顯示隱藏 } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div> <span v-if="show">hello world</span> <button v-on:click="handleBtnClick">顯示/隱藏</button> </div> ` // 在標簽中使用變量 }).mount('#root') // 將template中的內容掛載到id為root的元素中 </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看