Vue.js Counter with Toggle Theme Using Class Binding - Vue-js Typing CST Test

Vue.js Counter with Toggle Theme Using Class Binding — Vue-js Code

Demonstrates dynamic class binding for dark/light theme in Vue.js.

<template>
	<div :class="themeClass">
		<h2>Counter: {{ count }}</h2>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="toggleTheme">Toggle Theme</button>
	</div>
</template>

<script>
export default {
	data() { return { count: 0, isDark: false }; },
	computed: { themeClass() { return this.isDark ? 'dark-theme' : 'light-theme'; } },
	methods: { increment() { this.count++; }, decrement() { this.count--; }, toggleTheme() { this.isDark = !this.isDark; } }
};
</script>

Vue-js Language Guide

Vue.js is a progressive, open-source JavaScript framework for building user interfaces and single-page applications. It emphasizes simplicity, declarative rendering, and reactive data binding.

More Vue-js Typing Exercises

Practice Other Languages