<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>button.html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
<p>您最喜欢的游戏是：{{game}}</p>
<!-- v-on:click的冒号不能有空格，否则无效 -->
<!-- v-on:click绑定事件，这里选择的是鼠标单击 -->
<button v-on:click="btn_click(‘我的世界‘)">我的世界</button>
<button v-on:click="btn_click(‘魂斗罗2‘)">魂斗罗2</button>
<button v-on:click="btn_click(‘忍者神龟‘)">忍者神龟</button>
<!-- @ 就是 v-on: 这五个字符组合的缩写 -->
<button @click="btn_click(‘蜜蜂大战‘)">蜜蜂大战</button>
</div>
</body>
<script>
new Vue({
//直接使用名字就是，标签选择器，第一个标签
//el: "div",
//id选择器
el: "#example",
data: {
game: ‘超级玛丽‘
},
methods: {
btn_click:function(game_name) {
this.game = game_name;
}
}
});
</script>
</html>
原文：https://www.cnblogs.com/Lunix-touch/p/13866335.html