expression.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <script src="../../../dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="normal">
  10. <p v-text="one + ' ' + two.three + '!'"></p>
  11. <input id="one" v-model="one" name="one"> <input id="two" v-model="two.three" name="two">
  12. <button v-on="click: this.one = 'clicked'">click</button>
  13. </div>
  14. <div id="lazy">
  15. <p v-text="one + ' ' + two.three + '!'"></p>
  16. <form id="form">
  17. <input v-model="one" name="three"> <input v-model="two.three" name="four">
  18. </form>
  19. <button v-on="click: two.three = 'clicked'">click</button>
  20. </div>
  21. <div id="conditional">
  22. <p>{{ok ? yesMsg : noMsg}}</p>
  23. <button v-on="click: ok = !ok" class="toggle">toggle</button>
  24. <button v-on="click: noMsg = 'Nah'" class="change">change</button>
  25. </div>
  26. <script>
  27. Vue.config({debug:true})
  28. var normal = new Vue({
  29. el: '#normal',
  30. scope: {
  31. one: 'Hello',
  32. two: {
  33. three: 'World'
  34. }
  35. }
  36. })
  37. var lazy = new Vue({
  38. el: '#lazy',
  39. lazy: true,
  40. scope: {
  41. one: 'Hi',
  42. two: {
  43. three: 'Ho'
  44. }
  45. }
  46. })
  47. var conditional = new Vue({
  48. el: '#conditional',
  49. scope: {
  50. ok: true,
  51. yesMsg: 'YES',
  52. noMsg: 'NO'
  53. }
  54. })
  55. </script>
  56. </body>
  57. </html>