消息逆转 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue 测试实例</title>
 6         <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <p>{{ message }}</p>
11             <button v-on:click="reverseMessage">逆转消息</button>
12         </div>
13         <script>
14             var app = new Vue({
15                 el: '#app',
16                 data: {
17                     message: '你好,世界'
18                 },
19                 methods: {
20                     reverseMessage: function() {
21                         this.message = this.message.split('').reverse().join('')
22                     }
23                 }
24             })
25         </script>
26     </body>
27 </html>

 

posted @ 2017-08-07 15:28  零度咖啡  阅读(77)  评论(0)    收藏  举报