Membuat Lowercase dan Uppercase Menggunakan Vue JS

18/12/2019    Shelli Ripati    593     Website

Haloo teman-teman Dumet School, Pada kesempatan kali ini saya akan Membuat Lowercase dan Uppercase Menggunakan Vue JS. Lowercase adalah suatu fungsi untuk mengubah huruf menjadi huruf kecil semua, sedangkan uppercase yaitu fungsi untuk mengubah huruf menjadi huruf kapital semua. Dan kali ini kita akan menggunakan fungsi lowercase dan uppercase yang ada pada vue js. Langsung saja untuk dapat Membuat Lowercase dan Uppercase Menggunakan Vue JS teman-teman buat struktur htmlnya dengan sudah membuat kurung kurawel ganda untuk mencetak hasil atau outputnya seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Lowercase dan Uppercase Menggunakan Vue JS</title>
    <style type="">
        #text{
            background: salmon;
            color:gray;
            width: 800px;
            margin: auto;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
        <div id="text">    
            <!-- Normal -->
            <h1>{{text}}</h1>

            <!-- Lowercase -->
            <h1>{{text | lower}}</h1>

            <!-- Uppercase -->
            <h1>{{text | upper}}</h1>
        </div>
   
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman jangan lupa untuk menyisipkan link library vue js. teman-teman bisa mendapatkannya di halaman resmi https://vuejs.org/   dan berikut ini link library Vue Jsnya.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Jika sudah maka tahap selanjutnya teman-teman buat script vue js yang berisi el, data dan filters untuk mengubah huruf menjadi lowercase dan uppercase.

<script type="">
            var app = new Vue({
                el: "#text",
                data: {
                    text: "Selamat Datang Di Dumet School"
                },
                filters: {
                    upper(value){
                        if(!value) return ''
                            value = value.toString()
                        return value.toUpperCase()
                    },
                    lower(value){
                        if(!value) return ''
                            value = value.toString()
                        return value.toLowerCase()
                    }
                }
            })
        </script>

Didalem filters terdapat kondisi yang melakukan mengecek  ada tidaknya value atau data kemudian value di convert kedalam string lalu di ubah menjadi lowercase atau uppercase yang kemudian nilainya di kembalikan atau di return.

Demikian artikel tentang cara Membuat Lowercase dan Uppercase Menggunakan Vue JS. Semogaartikel ini dapat bermanfaat untuk teman-teman Dumet School. Sampai ketemu lagi di pembahasan selanjutnya dan selamat mencoba ya.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More