1. input输入框

   <div id="app">
   
       <div>        输入的用户名及密码为：{{userName}} {{password}}    div>    用户名：<input type="text" v-model="userName">    密码：  <input type="password" v-model="password">
   
       <div>        输入的用户名及密码为：{{user.userName}} {{user.password}}    div>    用户名：<input type="text" v-model="user.userName">    密码：  <input type="password" v-model="user.password">div>

   //js部分var app = new Vue({    el: '#app',    data: {        userName:'',        password:'',        user:{            userName:'',            password:''        }    }})

2. textarea文本域

   <div id="app">    <div>输入的题目为：{{title}}div>    题目：<textarea v-model="title">textarea>div>

   //js部分var app = new Vue({    el: '#app',    data: {     title:''    }})

3. 单选框

   <div id="app">    <div>当前选择性别对应的值为：{{gender}}div>    <label for="male">男label>    <input type="radio" value=1  id="male"   v-model="gender" />    <label for="female">女label>    <input type="radio" value=2  id="female" v-model="gender"/>div>

   //js部分var app = new Vue({    el: '#app',    data: {        gender:1    }})

备注：绑定同一model属性的几个单选框，无需使用同一个name属性即可互斥。

1. 复选框

• 4.1 单个复选框

  <div id="app">    <div>是否同意：{{agree}}div>    <input type="checkbox" id="agreement" v-model="agree" />    <label for="agreement">同意以上条款label>div>

  //js部分var app = new Vue({    el: '#app',    data: {     agree:true    }})

• 4.2 多个复选框

  <div id="app">    <div>正确答案：{{options}}div>    <input type="checkbox" value="A" v-model="options" />A    <input type="checkbox" value="B" v-model="options" />B    <input type="checkbox" value="C" v-model="options" />Cdiv>

  //js部分var app = new Vue({    el: '#app',    data: {     options:[]    }})

  备注：单个复选框对应布尔类型，多个复选框对应数组类型。

下拉列表

<div id="app">    <div>所选题型对应的value值为：{{questionType}}div>    题型：    <select v-model="questionType" >        <option value="0">请选择option>        <option value="1">单选题option>        <option value="2">多选题option>        <option value="3">判断题option>        <option value="4">填空题option>        <option value="5">主观题option>    select>div>

//js部分var app = new Vue({    el: '#app',    data: {     questionType:0    }})

备注：针对multiple多选类型的下拉列表，可用数组类型进行数据的绑定。

说明：

v-model本质上是一个语法糖，

相当于：

，

其中

v-bind: 绑定value属性，并动态渲染值。 v-on:   触发input事件，并传递当前值。