引入vue.js
建一个Vue对象,传入id为count的进行绑定,在对象里面定义变量与方法
在外部使用{{}}取出vue中的值
v-on:click : 点击按钮调用的方法或者语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
</head>
<body>
<div id="count">
<div>当前计数个数:{{counter}}</div>
<!-- <button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="js/vue.js"></script>
<script>
var count = new Vue({
el:"#count",
data:{
counter:0
},
methods:{
add: function(){
this.counter++;
},
sub: function(){
this.counter--;
}
}
})
</script>
</body>
</html>