Day23-Alpine.js之簡易綁定

第 12 屆 iThome 鐵人賽

DAY 23

自我挑戰組

愛寫什麼就寫什麼，開心最重要系列第 23 篇

12th鐵人賽

٩۹(๑•̀ω•́ ๑)۶

2020-10-08 22:34:02

673 瀏覽

分享至

國慶連假開始了~，今天來做個簡單的綁定吧。

<div x-data="{count:0}">
    <div>count=<span x-text="count"></span></div>
    <button @click="count--">-1</button>
    <button @click="count++">+1</button>
    <button @click="count=0">reset</button>
</div>

這連js都不用補，
x-text="count"這就可以隨著資料的變動在顯示上憶起變動了喔!
怕大家忘記其他基本觀念這裡補充說明一下
@click=""是x-on:click=""的簡寫，
count--是count=count-1的簡寫，
count++是count=count+1的簡寫，
等於左側是新的值，等於右側是原始值。

由於可以直接變更直接顯示，
這種綁定方式也是相當實用而且好用呢!