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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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...
...atau cara ini menggunakan kaedah harta terkira (diterangkan di bawah.)
--
Mesej asal:
getClass当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用getClass()代替您使用的getClass.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
testClassbergantung pada sifat reaktifnilai 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() "). Saya percaya perbezaan antara cara kaedah dan sifat yang dikira digunakan adalah punca kekeliruan anda. 🎜:class="testClass"和 NOT:class ="testClass()":class="testClass" dan NOT