Element UI Counter Example - Element-ui Typing CST Test

Element UI Counter Example — Element-ui Code

Demonstrates a simple counter layout using Element UI components and Vue.js for interactivity.

<template>
	<div style="text-align:center; margin-top:50px">
		<el-card>
		<h2>Counter: {{ count }}</h2>
		<el-button type="primary" @click="increment">+</el-button>
		<el-button type="danger" @click="decrement">-</el-button>
		<el-button type="default" @click="reset">Reset</el-button>
		<br /><br />
		<el-button type="warning" @click="toggleTheme">Switch Theme</el-button>
		</el-card>
	</div>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const count = ref(0);
		const isDark = ref(false);

		const increment = () => count.value++;
		const decrement = () => count.value--;
		const reset = () => count.value = 0;
		const toggleTheme = () => {
		isDark.value = !isDark.value;
		document.body.className = isDark.value ? 'dark-theme' : '';
		};

		return { count, increment, decrement, reset, toggleTheme };
	}
};
</script>

<style>
.dark-theme {
	background-color: #333;
	color: #fff;
}
</style>

Element-ui Language Guide

Element UI is a Vue.js-based UI component library for building desktop-oriented, enterprise-grade web applications. It emphasizes simplicity, consistency, and a professional design language.

More Element-ui Typing Exercises

Practice Other Languages