Vue.js学习笔记——处理用户输入（逆转消息）

denglishang

于 2018-02-06 10:58:58 发布

阅读量624

点赞数

分类专栏： Vue.js学习笔记前端学习笔记文章标签： vue.js实例逆转消息

前端学习笔记同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue.js学习笔记

3 篇文章

订阅专栏

本文通过一个简单的示例展示了如何使用Vue.js实现双向数据绑定。用户可以在输入框中输入文本，页面上的段落会实时更新显示输入的内容。此外，还提供了一个按钮用于反转输入的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码地址：https://cn.vuejs.org/v2/guide/#header

demo.html

<!DOCTYPE html>  
<html>  
   <head>  
       <meta charset="GBK"> 
        <title></title> 
        <script src="vue.js" type="text/javascript" charset="GBK"></script>    
   </head>
    <body>
      <div id="app">
      <input v-model="message">
  <p>{{ message }}</p>
  <button @click="reverseMessage">逆转消息</button>
</div>
        <script>
        var app = new Vue({
        el:'#app',
        data:{
        message:'Hello World!'
        },
        methods:{
        reverseMessage:function(){
        this.message = this.message.split('').reverse().join('')
        }
        }
        })
        </script>
    </body>  
</html>

效果截图：