XOOPS輕鬆架 - 線上書籍

:::

2-3 v-for 迴圈、v-bind 屬性綁定、v-show及v-if、computed next

Vue.js 3.0 筆記
=============

1. 可以利用 `v-on:事件="函式"` 來進行事件綁定，簡寫：`@事件="函式"`
2. `readonly `讓該變數值無法做任何調整
  
   
  ```markup
  <div id="app">
    <h1>一般：{{Num}}</h1>
    <button v-on:click="addFn">新增</button>
    <button v-on:click="removeFn">減少</button>
    <h1>唯讀：{{roNum}}</h1>
    <button @click="addRoFn">新增</button>
    <button @click="removeRoFn">減少</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const { ref, readonly } = Vue;
    const App = {
      setup() {
        const Num = ref(0);
        const roNum = readonly(Num);
        const addFn = () => {
          Num.value++;
        };
        const removeFn = () => {
          Num.value--;
        };
        const addRoFn = () => {
          roNum.value++;
        };
        const removeRoFn = () => {
          roNum.value--;
        };
        return {
          Num,
          roNum,
          addFn,
          removeFn,
          addRoFn,
          removeRoFn,
        };
      },
    };
    Vue.createApp(App).mount("#app");
  </script>
  
  ```
 
完整範例

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1727

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器