心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

<vue初体验> 三、 vue的计数器

发布时间：2022-06-30 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了<vue初体验> 三、 vue的计数器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、     效果

使用v-on:click指令实现方法的绑定，点击增加按钮数字加1，点击减少按钮数字减1

<vue初体验> 三、 vue的计数器

 

二、代码结构

<vue初体验> 三、 vue的计数器

 

三、代码

03-Vue计数器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-Vue计数器</title>
</head>
<body>

 

<div id="app">
  <h2>当前计数：{{counter}}</h2>
   <button type="button" v-on:click="add">+增加</button> <!--可以用@ 代替v-on-->
   <button type="button" @click="sub">-减少</button>
</div>

<script src="vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
    	counter:0
    },
	methods:{
		add:function(){
			this.counter++
		},
		sub:function(){
			this.counter--
		}
	}
  })
</script>
</body>
</html>

 

四、代码解释

属性：methods，该属性用于在Vue对象中定义方法。

指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

 

 

脚本宝典总结

以上是脚本宝典为你收集整理的<vue初体验> 三、 vue的计数器全部内容，希望文章能够帮你解决<vue初体验> 三、 vue的计数器所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程