vue数据操作 num加减点击事件

最新推荐文章于 2024-05-31 07:18:46 发布

原创最新推荐文章于 2024-05-31 07:18:46 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

前端-VUE 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建简单计数应用的例子。该应用通过按钮点击来增加或减少计数器数值，并实时显示当前计数状态。代码展示了如何定义Vue实例、绑定事件处理函数以及更新数据模型。

<div id="app">
    <button v-on:click="add(10)">click me</button>
    <button v-on:click="remove(5)">click me</button>
    <button v-on:click="num++">click me</button>
    <button v-on:click="num--">click me</button>
    <span>{{num}}</span>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num:0,
            message: '6',
            data: {
                name: '',
                gender: '',
                interest: [],
                identity: ''
            },
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        },
        methods:{
            add:function (inc){
                this.num += inc;
         },
            remove:function (dec){
                this.num -= dec;
            },
        }
    })
</script>