今天是第十一天，我想分享一下v-on來實現事件處理

我們可以把v-on的事件處理寫成 v-on:事件="事件發生時怎麼做"

這次用常見的字串反轉來進行今天的實作

開始寫程式吧

這裡是HTML的部分

<div id="app">
    <h3>{{message}}</h3>
    <button class ="btn btn-success" v-on:click="reverseMessage">反轉</button>
</div>

這裡是JS的部分

<script>
    const vueapp = {
    data(){
        return{
            message:'123456'  
            }
        },
    methods:{
        reverseMessage(){
            this.message=this.message
            .split('')
            .reverse()
            .join('')
            }
        }
    }
    Vue.createApp(vueapp).mount('#app')
</script>

methods裡面定義了reverseMessage()，當我按下HTML的那顆按鈕整個數列會反轉排列
從結果可以看到123456變成了654321

想了解更多可以參考這篇文章

v-on實現事件處理分享到這邊，我們第十二天見