# v-model与表单 vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用，输入的内容会实时映射到绑定的数据上 **example1：修改input框内容，message会实时渲染** ``` <template> <view class="content"> <view> <input type="text" v-model="message" placeholder="消息" /> </view> <view> <text class="message">{{ reversedMessage }}</text> </view> </view> </template> <script> export default { data() { return { message: 'Hello world!', } }, computed: { reversedMessage: function() { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } } </script> <style> page, view { display: flex; } page { min-height: 100%; } .content { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } input { border-bottom: 1upx solid; } .message { font-size: 60upx; font-weight: bold; } </style> ```