概述
事件监听使用 v-on 指令
v-on:click点击事件,可以简写成@click
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <div id="app" style="text-align: center"> <h3>计数器:<span style="color: red">{{counter}}</span></h3> <button v-on:click="counter++">加1</button> <button @click="counter--">减1</button> <br> <input type="text" v-model="number"> <button @click="add(number)">加</button> <br> <input type="text" v-model="number2"> <button @click="less(number2)">减</button> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { counter: 0, number: 0, number2: 0 }, methods: { add: function (number) { this.counter += parseInt(number); }, less: function (number2) { this.counter -= parseInt(number2); } } }) </script>
|