绑定其它表单
<template id="my-app">
<!-- 1.绑定textarea -->
<label for="intro">
自我介绍
<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
</label>
<h2>intro:{{intro}}</h2>
<!-- 2.1.checkbox -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree"> 同意协议
</label>
<h2>isAgree:{{isAgree}}</h2>
<!-- 2.2.多选框 -->
<span>你的爱好</span>
<label for="basketball">
<input type="checkbox" id="basketball" value="basketball" v-model="hobbies"> 篮球
</label>
<label for="football">
<input type="checkbox" id="football" value="football" v-model="hobbies"> 足球
</label>
<label for="tennis">
<input type="checkbox" id="tennis" value="tennis" v-model="hobbies"> 网球
</label>
<h2>hobbies:{{hobbies}}</h2>
<!-- 3.radio -->
<span>你的性别</span>
<!-- v-model绑定到同一个属性上时会自动互斥选择 -->
<label for="male">
<input type="radio" id="male" value="male" v-model="gender"> 男
</label>
<label for="female">
<input type="radio" id="female" value="female" v-model="gender"> 女
</label>
<h2>gender:{{gender}}</h2>
<!-- 4.select -->
<span>喜欢的水果</span>
<select v-model="fruit" multiple size="2">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>fruit:{{fruit}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
intro: "hello world",
isAgree: false,
hobbies: [],
gender: "male",
fruit: "apple"
}
}
};
Vue.createApp(app).mount("#app");
</script>