<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="num">
<p>{
{number}}</p>
<input type="button" value="+" @click="add">
<input type="button" value="-" @click="minus">
</div>
<script>
const num= new Vue({
el:"#num",
data:{
number:0,
},
methods:{
add:function(){
// 在函数中获取vue实例中data的数据
this.number++;
},
minus:function(){
this.number--;
}
}
});
</script>
</body>
</html>
+号按钮绑定add方法，-号按钮绑定minus方法，通过@click属性进行绑定。在num对象中，通过el属性指定vue对象的作用范围，data定义实例的一些相关数据，methods定义相关的函数，注意不是method，也可以直接写成函数名(参数){函数体}的形式。
运行效果：
点击加号，数字加一，点击减号，数字减一。