<div id="app">
<div class="p-5">
<p>{{name}}在{{position}}吃早餐</p>
<p><span v-text="name"></span>在<span v-text="position"></span>吃早餐</p>
<p v-once><span v-text="name"></span>在<span v-text="position"></span>吃早餐</p>
<input type="text" v-model="name">
<input type="text" v-model="position"> </div>
<hr>
<div class="p-5">
<p v-pre>加上v-pre的{{}}不會被轉譯</p>
<p v-pre>{{name}}在{{position}}吃早餐</p>
<p >{{name}}在{{position}}吃早餐</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');
