:::

2-2 v-on 事件綁定及readonly 唯讀

  1. 可以利用 v-on:事件="函式" 來進行事件綁定,簡寫:@事件="函式"
  2. readonly 讓該變數值無法做任何調整

    <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%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1727

計數器

今天: 2538253825382538
昨天: 3755375537553755
總計: 4458377445837744583774458377445837744583774458377