1. v-model指令
- 作用：便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<-->表单元素的值
完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <div id='app'> 10. <input type="text" v-model='message' @keyup.enter='getMes'> 11. <input type="button" value='修改mes' @click='setMes'> 12. <h2>{{message}}</h2> 13. </div> 14. 15. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 16. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 17. <script> 18. var app = new Vue({ 19. el:'#app', 20. data:{ 21. message:'我是测试小白!' 22. }, 23. methods:{ 24. getMes:function(){ 25. alert(this.message) 26. }, 27. setMes:function(){ 28. this.message='我是大海！' 29. } 30. 31. } 32. }) 33. </script> 34. </body> 35. </html>
