:::

2-1 響應式資料 ref、reactive及 v-model 雙向綁定

  1. 響應式資料 ref 用法,修改其值必須用 變數.value 才行,可以接受任何型態的資料,但是不會對物件或陣列內部的屬性變動做監聽。
  2. 響應式資料 reactive 用法,只能用[陣列]{物件}。可以做深層的監聽,以及訪問資料不需要 .value。
  3. 利用 v-model 可以做到雙向綁定(修改input,h1內容也會修改)。
    <div id="app">
        <h1>{{refMsg}}</h1>
        <input type="text" v-model="refMsg">
        <h1>{{reactiveMsg.Text}}</h1>
        <input type="text" v-model="reactiveMsg.Text">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const {
            ref,
            reactive
        } = Vue;
        const App = {
            setup() {
                const refMsg = ref("Hello Vue ref!");
                const reactiveMsg = reactive({
                    Text: "Hello Vue reactive!"
                });
                setTimeout(() => {
                    refMsg.value = "Hi ref!"
                    reactiveMsg.Text = "Hi reactive!"
                }, 3000);
                return {
                    refMsg,
                    reactiveMsg,
                };
            },
        };
        Vue.createApp(App).mount("#app");
    </script>

 

完整範例


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1726

計數器

今天: 2844284428442844
昨天: 3755375537553755
總計: 4458683445868344586834458683445868344586834458683