一、输入文本的绑定
1.单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
文本输入:<input type="text"> <br>
<!-- type="password"(类型=密码)密码输入框,用于输入密码,显示***。-->
输入密码:<input type="password"> <br>
<!-- type="file"(类型=文件)上传文件处,用于文件的选择和上传。-->
选择文件:<input type="file"> <br>
<!-- type="checkbox"(类型=复选框)用于某项选择的打开或关闭。-->
反复选择:<input type="checkbox"> <br>
<!-- type="radio"(类型=发送) 只能选择一次-->
唯一选择:<input type="radio"> <br>
<!-- type="image"(类型=图片) 将图片定义为提交按钮-->
图片提交:<input type="image”src="图片路径"><br>
<!-- type="submit"(类型=提交)专门用于提交表单的button按钮-->
提交按钮:<input type="submit"> <br>
<!-- type="month"(类型=月份) 定义year(年)和month(月)-->
选择月份:<input type="month"> <br>
<!-- type="number"(类型=数字) 只能选择/输入数字 -->
选择数字:<input type="number"> <br>
<!-- type="time" (类型=时间) 定义分秒 -->
选择时间:<input type="time"> <br>
<!-- type="week"(类型=周)定义年月周-->
选择周:<input type="week">
</body>
</html>
2.多行文本
<body>
<div id="app">
<!-- placeholder:占位符 -->
<textarea name="" id="" cols="30" rows="10" v-model="comment" placeholder="请输入您的留言"></textarea>
<p> 您的留言是 </p>
<p style="white-space: pre-line;"> {{comment}} </p>
<!-- <p> {{comment}} </p> -->
</div>
<script src="../../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
comment:''
}
})
</script>
</body>
二、选择类表单元素的绑定
1.单选按钮
<body>
<div id="app">
<span> 选择一种语言:{{language}} </span><br>
<input type="radio" id="python" value="python" v-model="language">
<label for="python"> python </label>
<input type="radio" id="JavaScript" value="JavaScript" v-model="language">
<label for="JavaScript"> JavaScript </label>
<input type="radio" id="C++" value="C++" v-model="language">
<label for="C++"> C++ </label>
</div>
<script src="../../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
language:""
}
})
</script>
</body>
2.复选框
<body>
<div id="app">
<span> 请选择语言,已选择:{{language}},{{language.length}}种 </span><br>
<input type="checkbox" id="python" value="python" v-model="language">
<label for="python"> python </label>
<input type="checkbox" id="JavaScript" value="JavaScript" v-model="language">
<label for="JavaScript"> JavaScript </label>
<input type="checkbox" id="C++" value="C++" v-model="language">
<label for="C++"> C++ </label>
</div>
<script src="../../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
language:[]
}
})
</script>
</body>
3.下拉框
<body>
<div id="app">
<span> 请选择一种语言：{{language}} </span><br>
<select name="" id="" v-model="language">
<option value="">python</option>
<option value="">JavaScript</option>
<option value="">c++</option>
</select>
</div>
<script src="../../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
language:""
}
})
</script>
</body>
4.多选列表框
<body>
<div id="app">
<span> 请选择语言,已选择：{{language.length}} </span><br>
{{language}}
<select name="" id="" v-model="language" multiple>
<option >python</option>
<option >JavaScript</option>
<option >c++</option>
</select>
</div>
<script src="../../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
language:[]
}
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
