<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue事件绑定</title> </head> <body> <h4>v-on：</h4> <div id="v-on-app"> <ul> <li v-for="book in books" key={{book}}} v-on:click="SubPrice(book.price)">{{book.title}}： {{book.price}}</li> </ul> <h4>event事件</h4> <br><a href="https://www.baidu.com/" v-on:click=gotoWebsite($event)> 跳转链接</a> <h4>事件修饰符</h4> <a href="https://www.baidu.com/" @click.prevent=gotoWebsite2> 修饰符跳转链接</a> </div> <script> new Vue({ el: "#v-on-app", data: { books: [{ title: ‘计算机原理‘, price: 65, }, { title: "数据结构", price: 70 }] }, methods: { SubPrice(price) { console.log(price) // Vue.set(this.books.price = this.books.price + 1) }, gotoWebsite(event) { event.preventDefault() window.location = "https://www.360.cn" }, gotoWebsite2(){ window.location = "https://www.360.cn" } } }) </script> </body> </html>
原文：https://www.cnblogs.com/xshan/p/12334577.html