<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>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # 數據,方法,計算屬性和偵聽器 本章將主要講解 **data** 、 **methods** 、 **computed** 、 **watcher** >[success] ## data 之前使用的 **data** 中的數據,我們可以 **通過控制臺** 來對 **data** 中的 **數據進行修改** ,例如: ~~~ vm.$data.message = '123' ~~~ 這樣就可以把 **data** 中的數據 **修改** 了,還有一個更簡便的方式 ~~~ vm.message = '123' ~~~ 這樣也是可以修改的。 >[success] ## methods **定義方法** 可以在 **methods** 中定義,但是這里需要注意 **methods** 中的方法的 **this指向** ,都是指向**vue的實例** ,**定義方法時候不可以用箭頭函數的方式定義方法,因為箭頭函數的this指向的是外層對象的this** 。 ~~~ <!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> const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, methods: { handleClick(){ console.log('click', this.message) } }, template: ` <div @click="handleClick">{{message}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ **methods** 也可以這樣用,這種用法叫做 **插值表達式** ,如下: ~~~ <!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> const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, methods: { formatString(string){ return string.toUpperCase() } }, template: ` <div>{{formatString(message)}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## computed **computed** 用來 **計算值**,最終 **返回一個計算后的結果** **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> const app = Vue.createApp({ data(){ return{ count: 2, price: 5 } }, computed: { total(){ return this.count * this.price } }, template: ` <div>{{ total }}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 那么有人說了用 **methods** 能實現與 **computed** 同樣的效果,實際上它倆還是有不同的, **computed** :**當計算屬性依賴的內容發生變更時,才會重新執行計算** **methods**:**只要頁面重新渲染,才會重新計算** >[success] ## watch **應用場景**:**監聽數據變化時,做一些邏輯處理** **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> // computed 和 method 都能實現的一個功能,建議使用 computed,因為有緩存 // computed 和 watcher 都能實現的功能,建議使用 computed 因為更加簡潔 const app = Vue.createApp({ data(){ return{ count: 2, price: 5, newTotal: 10 } }, watch:{ // price 發生變化時,函數會執行 price(current, prev){ this.newTotal = current * this.count } }, template: ` <div>{{newTotal}}</div> ` }) const vm = app.mount('#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>

                              哎呀哎呀视频在线观看