注：实例环境 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> 刷新浏览器
