vue案例-计数器.html
生活随笔
收集整理的這篇文章主要介紹了
vue案例-计数器.html
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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><button v-on:click="sub">-</button><!--下面是語法糖寫法--><!--<button @click="sub">-</button>-->
</div><script src="../js/vue.js"></script>
<script>// 語法糖: 簡寫// proxyconst obj = {counter: 0,message: 'abc'}new Vue()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案例-计数器.html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 声明式事务--@EnableTransa
- 下一篇： 计算属性一般是没有set方法, 只读属性