277 Time to Practice Composition API Core Building Blocks - Solution
发布时间
阅读量：
阅读量
示例
App.vue
<template>
<header>
<h1>Expense Tracker</h1>
</header>
<section>
<div>Available Funds: {{ availableFunds }}</div>
<div>Total Expenses: {{ currentExpenses }}</div>
<hr>
<div>Funds left: {{ remainingFunds }}</div>
</section>
<section>
<form @submit.prevent="addExpense">
<div>
<label for="amount">Amount</label>
<input id="amount" type="number" v-model="enteredExpense">
</div>
<button>Add Expense</button>
</form>
</section>
</template>
<script>
/*//Options API
export default {
data() {
return {
availableFunds: 100,
currentExpenses: 0,
enteredExpense: 0
};
},
computed: {
remainingFunds() {
return this.availableFunds - this.currentExpenses;
}
},
methods: {
addExpense() {
if (this.enteredExpense > 0) {
this.currentExpenses += this.enteredExpense;
this.enteredExpense = 0;
}
}
},
watch: {
remainingFunds(val) {
if (val < 0) {
alert('You have no funds left!');
}
}
}
};
*/
//Composition API
import { ref, computed, watch } from 'vue';
export default {
setup() {
const availableFunds = ref(100);
const currentExpenses = ref(0);
const enteredExpense = ref(0);
const remainingFunds = computed(() => {
return availableFunds.value - currentExpenses.value;
});
function addExpense() {
if (enteredExpense.value > 0) {
currentExpenses.value += enteredExpense.value;
enteredExpense.value = 0;
}
};
watch(remainingFunds, (newValue, oldValue) => {
if (newValue < 0) {
alert('You have no funds left!');
}
});
return {
availableFunds,
currentExpenses,
enteredExpense,
remainingFunds,
addExpense
};
}
};
</script>
<style scoped>
header {
background-color: #007bff;
/* 一种蓝色背景色 */
color: white;
/* 白色文字颜色，以在蓝色背景上清晰显示 */
padding: 20px;
/* 内边距，让内容与边缘有一定距离 */
text-align: center;
/* 文本居中显示 */
}
.logo {
display: block;
margin: 0 auto 2rem;
}
section {
margin: 3rem auto;
max-width: 30rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
}
</style>
javascript
全部评论 (0)
还没有任何评论哟~