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>

效果如下：