<div id="app">
<div class="p-5">
<h3>input:text</h3>
<input type="text" class="form-control" v-model="name">
{{ name }}
<hr>
<h3>input:number</h3>
<input type="number" class="form-control" v-model="num">
{{ num }}
<hr>
<h3>textarea</h3>
<textarea cols="30" rows="3" class="form-control" v-model="text"></textarea>
{{ text }}
</div>
</div>
const App = {
data() {
return {
name: "小明",
num: "5",
text: "一段文字敘述",
checkAnswer: false,
checkAnswer2: "",
checkAnswer3: [],
radioAnswer: "蘿蔔糕",
selectAnswer: "",
selectAnswer2: [],
products: [
{
name: "蛋餅",
price: 30,
vegan: false
},
{
name: "飯糰",
price: 35,
vegan: false
},
{
name: "小籠包",
price: 60,
vegan: false
},
{
name: "蘿蔔糕",
price: 30,
vegan: true
}
],
productsObj: {
chineseOmelette: {
name: "蛋餅",
price: 30,
vegan: false
},
riceBall: {
name: "飯糰",
price: 35,
vegan: false
},
soupDumpling: {
name: "小籠包",
price: 60,
vegan: false
},
radishCake: {
name: "蘿蔔糕",
price: 30,
vegan: true
}
}
};
},
methods: {}
};
Vue.createApp(App).mount("#app");
