16.数据代理.html 1009 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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. <!--
  10. 数据代理:
  11. Object.defineProperty()中getter和setter
  12. -->
  13. <div id="app">
  14. <h1>{{msg}}</h1>
  15. </div>
  16. <script src="./vue.js"></script>
  17. <script>
  18. var app = new Vue({
  19. el: "#app",
  20. data:{
  21. msg:'12'
  22. }
  23. })
  24. </script>
  25. <script>
  26. let obj = {
  27. name:"图图",
  28. age: 3
  29. }
  30. let x = 31;
  31. // console.log(obj.name)
  32. Object.defineProperty(obj,'age',{
  33. get() {
  34. console.log("读取");
  35. return x;
  36. },
  37. set(value) {
  38. console.log("修改")
  39. x = value;
  40. }
  41. })
  42. obj.age = 12;
  43. console.log(obj.age)
  44. </script>
  45. </body>
  46. </html>