---
# System prepended metadata

title: vue的事件驅動(v-on)
tags: [Java Web-vue]

---

# vue的事件驅動(v-on)
###### tags: `Java Web-vue`

#### html語法
```htmlembedded=
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!-- v-on:click 表示绑定点击事件 -->
        <!-- v-on可以省略，变成 @click -->
        <!--<input type="button" value="反转" v-on:click="myReverse"/>-->
        <input type="button" value="反转" @click="myReverse"/>
    </div>
```

#### vue語法
```htmlembedded=
methods:{
        myReverse:function(){
<!--讓字符串反轉 -->
        this.msg = this.msg.split("").reverse().join("");
                    }
                }
```

點擊前
![](https://i.imgur.com/lhv0RE0.png)
點擊後
![](https://i.imgur.com/Kz5Gmwm.png)
