Vue v html baris baru

Question

Data digunakan untuk mendefinisikan properti dalam komponen tertentu. Dalam komponen file tunggal, data() adalah fungsi yang mengembalikan sekumpulan properti yang telah dijelaskan dalam fungsi

Table of Contents Show

Menggunakan pra tag
Menggunakan tag br
Menggunakan tag textarea
Menggunakan ruang putih. pra;
Bagaimana cara membuat baris baru di Vue?
Bagaimana Anda memutuskan garis di Vue?
Bisakah Anda menggunakan Vue dalam HTML?
Apa itu $V di Vue?

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?

Komentar .

menambahkan dua spasi di akhir baris

menambahkan dua karakter baris baru

menambahkan \ di akhir baris

adding
at the end of the line..

Bagaimana Anda memutuskan garis di Vue?

Ganti \n dengan .

Bisakah Anda menggunakan Vue dalam HTML?

Anda dapat menggunakan Vue untuk membangun Komponen Web standar yang dapat disematkan di halaman HTML apa pun, terlepas dari bagaimana komponen tersebut dirender .

Apa itu $V di Vue?

$v adalah objek yang memanggil vuelidate (pada saat menulis komentar, didukung dalam versi Vue. js 2. 0), yang dimaksudkan untuk memeriksa setiap masukan, yang dibuat dalam bentuk non-html.

kode html