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

这篇文章将为大家详细讲解有关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测试上述代码,可得如下运行结果:

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

关于“vue如何使用点击事件实现num加减功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

发布于 2021-07-09 21:17:45
收藏
分享
海报
0 条评论
188
上一篇:vue-cli项目中怎么配置反向代理 下一篇:JavaSctit如何利用FileReader和滤镜上传图片预览功能
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码