Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muhammad-haram/job-listing-web-with-vue.js
https://github.com/muhammad-haram/job-listing-web-with-vue.js
javascript vuejs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/muhammad-haram/job-listing-web-with-vue.js
- Owner: Muhammad-Haram
- Created: 2024-10-16T18:19:20.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T19:56:24.000Z (2 months ago)
- Last Synced: 2024-11-14T16:07:21.470Z (about 2 months ago)
- Topics: javascript, vuejs
- Language: HTML
- Homepage:
- Size: 64.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Options Api vs Composition Api
Options Api
export default {
data() {
return {
name: "Muhammad Haram",
status: "active",
tasks: ['1', '2', '3', '4', '5'],
link: "https://github.com/"
};
},
methods: {
toggleStatus() {
if (this.status === "active") {
this.status = "pending";
} else if (this.status === "pending") {
this.status = "inactive";
} else {
this.status = "active";
}
},
}
}
{{ name }}
User is Active
User is pending
User is not active
tasks
- {{ task }}
github
click
Composition Api
import { ref } from 'vue'
export default {
setup() {
const name = ref("Muhammmad Haram");
const status = ref("active");
const tasks = ref(["task1", "task2", "task3"]);
const toggleStatus = () => {
if (status.value === "active") {
status.value = "pending";
} else if (status.value === "pending") {
status.value = "inactive";
} else {
status.value = "active";
}
}
return {
name,
status,
tasks,
toggleStatus
}
}
}
{{ name }}
User is Active
User is pending
User is not active
tasks
- {{ task }}
click