<vue初体验> 基础知识 3、vue的计数器

系列导航

<vue初体验> 一、 vue的引入和使用体验

<vue初体验> 二、 vue的列表展示

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

<vue初体验> 四、 vue的生命周期

一、     效果

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

 

二、代码结构

 

三、代码

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中定义的方法)

 

 

posted @ 2021-11-12 18:38  万笑佛  阅读(261)  评论(0)    收藏  举报