<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] # computed方法生成計算屬性 下面講解一下 **composition API** 的新版 **computed計算屬性** 如何使用。 >[success] ## computed 普通用法 1. **Vue2.x 版本 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>computed方法生成計算屬性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // vue2.x 版本 computed 計算屬性 const app = Vue.createApp({ data(){ return{ cd: 'cd' } }, computed: { abc(){ return this.cd + 'efg' } }, template: ` <div> {{ abc }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **Vue 3 版本 computed 使用方法** 在 **composition API** 中使用 **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>computed方法生成計算屬性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 const countAddFive = computed(() => { return count.value + 5 }) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 或者可以寫的復雜一些,用 **get** 方法來寫。 >[success] ## computed 的 get set方法 1. **get** **get** 實現的效果, **與上面的普通寫法實現的效果是一樣的** , **get** 表示獲取返回的這個值。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 const countAddFive = computed({ get: () => { return count.value + 5 } }) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **set** **當計算屬性被修改時**,會觸發 **set** 這個方法,如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 let countAddFive = computed({ get: () => { return count.value + 5 }, set: () => { count.value = 10 } }) // 2s 后修改 countAddFive 計算屬性 setTimeout(() => { countAddFive.value = 100 }, 3000) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## computed 的 get set使用實例 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 let countAddFive = computed({ get: () => { return count.value + 5 }, set: (param) => { count.value = param - 5 } }) // 2s 后修改 countAddFive 計算屬性 setTimeout(() => { countAddFive.value = 100 }, 3000) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </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>

                              哎呀哎呀视频在线观看