浏览量 4666
2018/11/02 00:49
<!--
# @Time : 2018/11/2 上午12:31
# @Author : BrownWang
# @Email : 277215243@qq.com
# @File : vue8.html.html
# @Software: PyCharm -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter</title>
</head>
<body>
<div id="app">
<p>总数:{{ total }}</p>
<component
@increase="handleGetTotal"
@reduce="handleGetTotal"></component>
</div>
<script src="/static/js/vue.min.js"></script>
<script>
Vue.component('component',{
template:'\
<div>\
<button @click="handleIncrease">+1</button>\
<button @click="handleReduce">-1</button>\
</div>',
data:function () {
return{
counter:0
}
},
methods:{
handleIncrease:function () {
this.counter++;
this.$emit('increase',this.counter);
},
handleReduce:function () {
this.counter--;
this.$emit('reduce',this.counter);
}
}
});
var app=new Vue({
el:'#app',
data:{
total:0
},
methods:{
handleGetTotal:function (total) {
this.total=total;
}
}
})
</script>
</body>
</html>
上一篇 搜索 下一篇