一、text
<input type="text" v-model="str" />
二、radio
<input type="radio" v-model="str1" value="苹果">苹果
<input type="radio" v-model="str1" value="香蕉">香蕉
<input type="radio" v-model="str1" value="西瓜">西瓜
<input type="radio" v-model="str1" value="雪梨">雪梨
三、checkbox
<input type="checkbox" v-model="str2" value="中国">中国<br>
<input type="checkbox" v-model="str2" value="印度">印度<br>
<input type="checkbox" v-model="str2" value="巴西">巴西<br>
<input type="checkbox" v-model="str2" value="南非">南非<br>
四、select
下拉选择框1:{{str3}}<br>
<select v-model="str3">
<option value="牛奶">牛奶</option>
<option value="鸡蛋">鸡蛋</option>
<option value="油条">油条</option>
<option value="豆浆">豆浆</option>
</select>
<br><br>
下拉选择框2:{{str4}}<br>
<select v-model="str4" multiple>
<option value="牛奶">牛奶</option>
<option value="鸡蛋">鸡蛋</option>
<option value="油条">油条</option>
<option value="豆浆">豆浆</option>
</select>
五、代码集合
<body>
<div id="app">
输入框:{{str}}<br>
<input type="text" v-model="str" />
<br><br>
单选框:{{str1}}<br>
<input type="radio" v-model="str1" value="苹果">苹果
<input type="radio" v-model="str1" value="香蕉">香蕉
<input type="radio" v-model="str1" value="西瓜">西瓜
<input type="radio" v-model="str1" value="雪梨">雪梨
<br><br>
复选框:{{str2}}<br>
<input type="checkbox" v-model="str2" value="中国">中国<br>
<input type="checkbox" v-model="str2" value="印度">印度<br>
<input type="checkbox" v-model="str2" value="巴西">巴西<br>
<input type="checkbox" v-model="str2" value="南非">南非<br>
<br><br>
下拉选择框1:{{str3}}<br>
<select v-model="str3">
<option value="牛奶">牛奶</option>
<option value="鸡蛋">鸡蛋</option>
<option value="油条">油条</option>
<option value="豆浆">豆浆</option>
</select>
<br><br>
下拉选择框2:{{str4}}<br>
<select v-model="str4" multiple>
<option value="牛奶">牛奶</option>
<option value="鸡蛋">鸡蛋</option>
<option value="油条">油条</option>
<option value="豆浆">豆浆</option>
</select>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
str:"",
str1:"",
str2:[],
str3:"牛奶",
str4:[]
}
})
</script>
</body>
六、运行效果
重点:
1.复选框checkbox要用数组
2.下拉框select要写在外层