テキストエリア（textarea）を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> <style> textarea { width: 300px; height: 80px; } </style> </head> <body> <div id="app"> <textarea v-model="message" placeholder="入力して下さい"></textarea> <p style="white-space: pre-line">{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '' } }); </script> </body> </html> |
17行目
v-modelディレクティブを利用してデータとバインドしています。
関連ページ
