2-2
v-on 事件綁定及readonly 唯讀
- 可以利用
v-on:事件="函式" 來進行事件綁定，簡寫：@事件="函式"
-
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>
完整範例
2-1 響應式資料 ref、reactive及 v-model 雙向綁定
