<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" value="调试 vuejs 2.0" ref="input1"> <a href="javascript:void(0)" v-on:click="test1">测试</a> <br> <span>{{ result1 }}</span> <br> <input type="text" v-model="input2"> <a href="javascript:void(0)" v-on:click="test2">测试</a> <br> <span>{{ result2 }}</span> </form> <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="demo.js"></script> </body> </html>
new Vue({ el: "#demo", data: { result1: null, result2: null, input2: "" }, created: function() { // the created hook is called after the instance is created }, methods: { test1: function () { this.result1 = this.$refs.input1.value + " 成功!"; }, test2: function () { this.result2 = this.input2 + " 成功!"; } } })