<div id="app">
<div class="p-5">
<h3>進階技巧：表達式</h3>
<p>{{name}}在{{position}}吃早餐</p>
<p>{{`${name}在${position}吃早餐`}}</p>
<p>{{`${name}在${position}吃${30+50+100}元的早餐`}}</p>
<p>{{text.split('').reverse().join('')}}</p>
<p>可以綁定methods: {{say('杰倫')}}</p>
<p>{{ 87+87 }}</p>
<hr>
<h3>進階技巧：顯示資料狀態</h3>
<p>{{products}}</p>
</div>
</div>
const App = {
name: 'Hexschool Component',
data() {
return {
name: '小明',
position: '早餐店',
text: '小明在早餐店吃早餐',
rawHtml: '<p>小明在早餐店吃早餐</p>',
products: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
{
name: '小籠包',
price: 60,
vegan: false
},
{
name: '蘿蔔糕',
price: 30,
vegan: true
}
],
selected: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
]
}
},
methods: {
say(name) {
return `${name}在${this.position}吃早餐`
}
},
computed: {
total() {
const total = this.selected.reduce((curr, next) => {
return curr + next.price;
}, 0);
console.log(total);
return total;
}
},
created() {
}
};
Vue.createApp(App).mount('#app');
