vue如何使用点击事件实现num加减功能

tangjin

作者

这篇文章将为大家详细讲解有关vue如何使用点击事件实现num加减功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Vuenum加减</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<divid="app">
<buttonv-on:click="add(10)">clickme</button>
<buttonv-on:click="remove(5)">clickme</button>
<buttonv-on:click="num++">clickme</button>
<buttonv-on:click="num--">clickme</button>
<span>{{num}}</span>
</div>
<script>
newVue({
el:'#app',
data:{
num:0,
message:'6',
data:{
name:'',
gender:'',
interest:[],
identity:''
},
selected:'A',
options:[
{text:'One',value:'A'},
{text:'Two',value:'B'},
{text:'Three',value:'C'}
]
},
methods:{
add:function(inc){
this.num+=inc;
},
remove:function(dec){
this.num-=dec;
},
}
})
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：