1、文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> </body> <script> new Vue({ el: '#app', data: { message: '' } }) </script> </html>
结果：
2、多行文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p><br> <textarea v-model="message" placeholder="add multiple lines"></textarea> </div> </body> <script> new Vue({ el: '#app', data: { message: '' } }) </script> </html>
结果：
