<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!--
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
-->
<button v-on:click="add">+</button>
<!--v-on还可以这样用@表示 -->
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const obj = {
counter: 0,
}
const app = new Vue({
el: '#app',
data: obj,
methods: {
add: function () {
console.log('add被执行');
this.counter++
},
sub: function () {
console.log('sub被执行');
this.counter--
}
},
beforeCreate: function () {
},
created: function () {
console.log('created');
},
mounted: function () {
console.log('mounted');
}
})
//1.拿到button元素
//2.添加监听事件
</script>
</body>
</html>
Vue案例之计数器
原创
©著作权归作者所有:来自51CTO博客作者兮动人的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:Vue中的MVVM
下一篇:Vue之v-for列表展示
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
排序算法之计数排序的优化
排序算法之计数排序的优化
数组 计数排序 最小值 -
C# Onnx yolov8 竹签计数、一次性筷子计数
C# Onnx yolov8 竹签计数、一次性筷子计数
Image System Text -
Vue的引入方式,属性和计数器案例
邂逅vue 基础 引入方式,属性和计数器案例 【新人基础】
html css css3 vue.js 官网 -
Vue 本地应用-计数器
【代码】Vue 本地应用-计数器。
vue.js html css javascript -
VUE计数器小示例
\
VUE计数器小示例 html vue.js .net