# 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> ```