1.input
<div>
<!-- v-model绑定input -->
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script>
const App={
template:'#my-app',
data() {
return {
message:'Hello World',
}
},
}
Vue.createApp(App).mount('#app')
</script>效果如下：
2.textarea
<div>
<!-- v-model绑定textarea -->
<textarea name="" id="" cols="30" rows="3" v-model="texta"></textarea>
<h2>{{texta}}</h2>
</div>
<script>
const App={
template:'#my-app',
data() {
return {
texta:"textarea",
}
},
}
Vue.createApp(App).mount('#app')
</script>效果如下：
3.checkbox
<div>
<!-- v-model绑定多选checkbox【多选框绑定v-model显示必须写value，v-model显示的值就是value中的值】-->
<span>你的爱好：</span>
<label for="basketball">
<input type="checkbox" v-model="hobbies" value="basketball">篮球
</label>
<label for="football">
<input type="checkbox" v-model="hobbies" value="football">足球
</label>
<label for="badminton">
<input type="checkbox" v-model="hobbies" value="badminton">羽毛球
</label>
<label for="tennis">
<input type="checkbox" v-model="hobbies" value="tennis">网球
</label>
<h2>{{hobbies}}</h2>
</div>
<script>
const App={
template:'#my-app',
data() {
return {
hobbies:[],
}
},
}
Vue.createApp(App).mount('#app')
</script>效果如下：
4.radio
<div>
<!-- v-model绑定单选radio -->
<span>性别：</span>
<label for="male">
<input type="radio" v-model="gender" value="male">男
</label>
<label for="female">
<input type="radio" v-model="gender" value="female">女
</label>
<h2>性别选项是{{gender}}</h2>
</div>
<script>
const App={
template:'#my-app',
data() {
return {
gender:'',
}
},
}
Vue.createApp(App).mount('#app')
</script>效果如下：
5.select
<div>
<!-- v-model绑定select下拉框(select添加multiple size="2" 可多选至2) -->
<select v-model="fruit" name="" id="">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
<h2>水果{{fruit}}</h2>
</div>
<script>
const App={
template:'#my-app',
data() {
return {
fruit:[],
}
},
}
Vue.createApp(App).mount('#app')
</script>效果如下：
