Data digunakan untuk mendefinisikan properti dalam komponen tertentu. Dalam komponen file tunggal, data() adalah fungsi yang mengembalikan sekumpulan properti yang telah dijelaskan dalam fungsi
kami mendefinisikan properti str1,str2,msg1,msg2 Anda dapat melihatnya
Menggunakan pra tag
Kami akan menggunakan karakter baris baru, \n, yang digunakan dalam javascript dan banyak bahasa lainnya. Untuk menambahkan yang baru di string atau karakter Anda, kami harus menggunakan \n sebelum string atau karakter itu. Ini akan memutus baris dan menambahkan baris baru ke string
FirstComponent.vue
<template> <div> <p>{{ msg2 }}</p> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \n Welcome To SortoutCode!' } }, } </script>
Untuk saat ini, mari kita periksa hasilnya
Keluaran
Menggunakan tag br
Kita dapat menggunakan metode lama untuk baris baru menggunakan tag <template> <div> <p>{{ msg2 }}</p> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \n Welcome To SortoutCode!' } }, } </script>1. <template> <div> <p>{{ msg2 }}</p> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \n Welcome To SortoutCode!' } }, } </script>1 tag akan menyisipkan jeda baris tunggal. kita dapat menggunakan dua string yang berbeda dan menggunakan tag br tambahkan baris baru di string
mari kita lihat contohnya
FirstComponent.vue
<template> <div> <h1>{{str1}}<br/>{{str2}}</h1> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ str1 : "Hi Friends", str2 : "Welcome To SortoutCode!", } }, } </script>
Untuk saat ini, mari kita periksa hasilnya
Keluaran
Menggunakan tag textarea
kita dapat menggunakan karakter \n di antara string. Untuk mencetak string itu kami menggunakan tag input Textarea. Di textarea long string break dan tambahkan baris baru di string
Mari kita lihat contohnya
FirstComponent.vue
<template> <div> <textarea v-model="msg2"></textarea> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \nWelcome To SortoutCode!', } }, } </script>_
Untuk saat ini, mari kita periksa hasilnya
Keluaran
Menggunakan ruang putih. pra;
HTML mengabaikan baris baru kecuali jika Anda menentukan <template> <div> <p>{{ msg2 }}</p> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \n Welcome To SortoutCode!' } }, } </script>6 atau <template> <div> <p>{{ msg2 }}</p> </div> </template> <script> export default { name: 'FirstComponent', data(){ return{ msg2:'Hi Friends \n Welcome To SortoutCode!' } }, } </script>7\n` karakter dalam string dan menggunakannya dengan tag HTML lain, tidak akan berfungsi mari kita lihat contoh, tentang cara kerjanya
Bagaimana cara membuat baris baru di Vue?
at the end of the line..