vue3.x methods语法

 

注：实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <label>加法:</label>
        <input type="number" v-model="num1"/><span>+</span><input type="number" v-model="num2"/><button @click="sum">=</button>{{total}}
        <hr>
        <input type="text" v-model="newListText"/><button @click="addList">添加到列表</button>
        <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
        </ul>
        <hr>
        <form @submit.prevent="onSubmit">
            <label>用户名</label>
            <input type="text" v-model="username"/>
            <label>年龄</label>
            <input type="number" v-model="age"/>
            <input type="submit" value="提交"/>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                num1:0,
                num2:0,
                total:0,
                newListText:'',
                list:[],
                username:'',
                age:null
            }
        },
        methods:{
            sum:function () {
                this.total = parseInt(this.num1) + parseInt(this.num2);
            },
            addList:function () {
                if(this.newListText.length===0) return;
                this.list.push(this.newListText);
                this.newListText = '';
            },
            onSubmit:function () {
                alert('username:'+this.username+' age:' + this.age);
            }

        }
    }
</script>

<style scoped>

</style>

刷新浏览器