Vue Auto Increment Counter - Nativescript Typing CST Test

Vue Auto Increment Counter — Nativescript Code

Counter automatically increments every second with pause/resume control.

<template>
	<Page class="page" :class="{ 'dark-theme': isDark }">
		<ActionBar title="Auto Counter" class="action-bar" />
		<StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
		<Label :text="`Counter: ${count}`" class="counter-text" />
		<Button text="Pause/Resume" @tap="toggleRunning" class="btn-warning" />
		<Button text="Reset" @tap="reset" class="btn-secondary" />
		</StackLayout>
	</Page>
</template>

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

		let interval;
		onMounted(() => {
		interval = setInterval(() => { if(isRunning.value) count.value++; }, 1000);
		});
		onUnmounted(() => clearInterval(interval));

		const toggleRunning = () => isRunning.value = !isRunning.value;
		const reset = () => count.value = 0;
		const toggleTheme = () => isDark.value = !isDark.value;

		return { count, isRunning, toggleRunning, reset, toggleTheme, isDark };
	}
};
</script>

<style scoped>
	.page { background-color: #fff; color: #000; }
	.dark-theme { background-color: #333; color: #fff; }
	.container { margin-top: 50px; text-align: center; }
	.btn-warning, .btn-secondary { margin: 5px; }
	.counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Nativescript Language Guide

NativeScript is an open-source framework for building truly native mobile applications using JavaScript, TypeScript, Angular, or Vue. It allows developers to write cross-platform apps that access native APIs directly without using WebViews.

More Nativescript Typing Exercises

Practice Other Languages