<div id="app">
<div class="p-5">
<h3 class="border-bottom">參數傳入</h3>
<ul class="list-unstyled">
<li>
<p>methods有定義參數但是沒有傳入</p>
<button type="button" @click="methodParameter()">參數傳入</button>
<hr>
</li>
<li>
<p>methods有定義參數，傳入數量不足</p>
<button type="button" @click="methodParameter(1,2)">參數傳入</button>
<hr>
</li>
<li>
<p>methods有定義參數，傳入數量不足2</p>
<button type="button" @click="methodParameter(1,null,3)">參數傳入</button>
<hr>
</li>
<li>
<p>傳入事件物件</p>
<button type="button" @click="methodParameter(1,$event,3)">參數傳入</button>
<hr>
</li>
<li>
<p>傳入事件物件2</p>
<button type="button" @click="methodParameter($event,$event,$event,$event)">參數傳入</button>
<hr>
</li>
</ul>
<h3 class="border-bottom">僅有一參數</h3>
<ul class="list-unstyled">
<li>
<p>只有一個參數</p>
<button type="button" @click="methodParameter2">參數傳入</button>
<button type="button" @click="methodParameter2(3)">參數傳入</button>
<hr>
</li>
</ul>
</div>
</div>
const App = {
data() {
return {
num: 10,
products: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
{
name: '小籠包',
price: 60,
vegan: false
},
{
name: '蘿蔔糕',
price: 30,
vegan: true
},
],
carts: [],
sum: 0,
}
},
methods: {
trigger(name) {
console.log(name, '此事件被觸發了')
},
callOtherMethod() {
this.trigger('由 callOtherMethod 觸發')
},
methodParameter(a, b, c, d) {
console.log(a, b, c, d)
},
methodParameter2(a){
console.log(a);
}
// addToCart(product) {
// this.carts.push(product)
// },
// calculate() {
// let total = 0;
// this.carts.forEach(item => {
// total += item.price;
// });
// this.sum = total;
// },
// convertToAmount(price) {
// return `NT$ ${price}`;
// }
},
created() {
// this.trigger('由生命週期觸發');
}
};
Vue.createApp(App).mount('#app');
