Kelas gaya tidak digunakan pada elemen dalam VueJS
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!
