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>
    
    ```
 
完整範例

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器