简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Kelas gaya tidak digunakan pada elemen dalam VueJS
P粉465287592
P粉465287592 2024-01-16 21:53:49
0
1
402

Jadi saya ingin menggunakan kelas .testcolor pada div apabila nilai ujian adalah benar dan tidak menggunakan apa-apa apabila nilai ujian adalah palsu.

Apabila saya menambah kaedah getClass ke :class ia tidak dipanggil pun, tetapi dipanggil daripada {{ getClass }} . Saya telah cuba mengosongkan cache dan juga menulis semula keseluruhan kod tetapi masih tidak berfungsi! Kod lengkap adalah seperti berikut: 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Test</title>
        <style>
            .testcolor {
                color: red !important;
            }
        </style>
    </head>
    <body>
        <div id="test" :class="getClass">
            <h1>Test stuff</h1>
            <h2>{{ testvalue }}</h2>
        </div>
        <script type="module">
            import { createApp } from "https://unpkg.com/vue@3.2.19/dist/vue.esm-browser.js";

            createApp({
                data() {
                    return {
                        testvalue: true,
                    };
                },
                methods: {
                    getClass() {
                        console.log("Method 'getClass' called");
                        return this.testvalue ? "testcolor" : "";
                    },
                },
            }).mount("#test");
        </script>
    </body>
</html>

Saya mendapati bahawa jika saya memasang contoh Vue pada elemen div dan menambah :class="testClass" (daripada jawapan) pada h2 ia berfungsi! Tetapi apabila saya memasangnya pada elemen h2 ia tidak berfungsi!

P粉465287592
P粉465287592

membalas semua(1)
P粉662614213
P粉6626142132024-01-17 19:38:21 Tingkat 1

Sunting berdasarkan komen anda @martin0300

Pertama, anda perlu membalut partition ini dalam partition lain yang idnya mesti diuji. Vue tidak menganggap elemen kontena (div dengan id test) sebagai sebahagian daripada aplikasi dan tidak mengendalikan sebarang arahan. Rujukan yang menyebut perkara ini ditinggalkan di bawah.

https://vuejs.org/guide/essentials/application .html#Pasang aplikasi

Jadi tukar markup anda kepada sesuatu seperti ini untuk menggunakan nilai daripada kaedah getClass...


    

        
Test stuff

        
{{ testvalue }}

...atau cara ini menggunakan kaedah harta terkira (diterangkan di bawah.) 


    

        
Test stuff

        
{{ testvalue }}

--

Mesej asal:

getClass 当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用 getClass() 代替您使用的 getClass. 


    
Test stuff

    
{{ testvalue }}

Maksudnya, ini bukan cara pilihan untuk memohon kelas secara bersyarat. Kami lebih suka sifat yang dikira daripada kaedah. Kaedah dipanggil pada setiap pemaparan, manakala sifat yang dikira hanya dikira semula apabila data reaktif yang mendasarinya bergantung pada perubahan (dalam kes ini, sifat yang dikira testClass bergantung pada sifat reaktif nilai ujian代码>.

Kod Vue idiomatik dalam kes anda adalah seperti berikut. Ambil perhatian bahawa sifat yang dikira tidak dipanggil seperti fungsi kerana ia dilaksanakan secara dalaman menggunakan kaedah pengakses/menggunakan proksi JS (:class="testClass" 和 NOT :class ="testClass()":class="testClass" dan NOT

: class ="testClass() "). Saya percaya perbezaan antara cara kaedah dan sifat yang dikira digunakan adalah punca kekeliruan anda. 🎜 

    
Test stuff

    
{{ testvalue }}



sssccc
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！