js15.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script src="../vue.min.js"></script>
  12. </head>
  13. <body ontouchstart class="page-bg" >
  14. <div class="page-hd">
  15. <h1 class="page-hd-title">
  16. vue2.1.6
  17. </h1>
  18. <p class="page-hd-desc">需要加载vue.min.js</p>
  19. </div>
  20. <div class="page-bd-15">
  21. <div id="app" v-bind:title="message">
  22. {{message}}
  23. <ol>
  24. <li v-for="v in list">
  25. {{ v.text }}
  26. </li>
  27. </ol>
  28. </div>
  29. <a href="http://vue.sike.io/" target="_blank" >vue中文教程</a>
  30. <a id="app2" href="#" v-on:click="alerts">{{message}}</a>
  31. </div>
  32. <script>
  33. var app = new Vue({
  34. el: '#app',
  35. data: {
  36. message: '你好 世界!',
  37. list:[{ text: '我是天朝小民' },{ text: '我是美国公民' },{ text: '我是大侠移民' }]
  38. }
  39. })
  40. var app2 = new Vue({
  41. el: '#app2',
  42. data: {
  43. message: '中文教程!'
  44. },
  45. methods: {
  46. alerts: function () {
  47. this.message ="你好美";
  48. }
  49. }
  50. })
  51. </script>
  52. </body>
  53. </html>