十五、Vue表单输入绑定
十五、Vue表单输入绑定
强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码
一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216 二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322 三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517 四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651 五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870 六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953 七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009 八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068 九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083 十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826 十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107 十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177 十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393 十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173 十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776 十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105
Vue表单输入绑定
基础用法
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selectedattribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现
v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。
文本
<div id="app">
<input type="text" v-model="message">
<div>{
{message}}</div>
</div>
image.png
多行文本
<textarea v-model="textarea" cols="30" rows="10"></textarea>
<p style="white-space: pre-line">{
{textarea}}</p>
image.png
单个复选框
<input type="checkbox" value="多选" v-model="isRead">
<div>{
{isRead}}</div>效果如下图：
image.png
多个复选框
<input type="checkbox" value="足球" v-model="favorites">足球</input>
<input type="checkbox" value="篮球" v-model="favorites">篮球</input>
<input type="checkbox" value="爬山" v-model="favorites">爬山</input>
<input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
<div>{
{favorites}}</div>效果如下图：
image.png
单选按钮
<input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
<div>{
{gender}}</div>效果如下图：
image.png
下拉框
<select v-model="edu">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
</select>
<div>{
{edu}}</div>效果如下图：
image.png
下拉框多选
<select v-model="favorites" multiple>
<option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{
{f}}</option>
</select>效果如下图：
image.png
值绑定
<input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
<div>{
{toggle}}</div>效果如下图：
image.png
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的表单输入绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--普通文本-->
<input type="text" v-model="message">
<div>{
{message}}</div>
<hr>
<!--多行文本-->
<textarea v-model="textarea" cols="30" rows="10"></textarea>
<p style="white-space: pre-line">{
{textarea}}</p>
<hr>
<!--单个复选框-->
<input type="checkbox" value="多选" v-model="isRead">
<div>{
{isRead}}</div>
<hr>
<!--多个复选框-->
<input type="checkbox" value="足球" v-model="favorites">足球</input>
<input type="checkbox" value="篮球" v-model="favorites">篮球</input>
<input type="checkbox" value="爬山" v-model="favorites">爬山</input>
<input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
<div>{
{favorites}}</div>
<hr>
<!--单选按钮-->
<input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
<div>{
{gender}}</div>
<hr>
<!--下拉框-->
<select v-model="edu">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
</select>
<div>{
{edu}}</div>
<hr>
<!--下拉框多选-->
<select v-model="favorites" multiple>
<option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{
{f}}</option>
</select>
<hr>
<!--值绑定-->
<input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
<div>{
{toggle}}</div>
<hr>
<input type="text" v-model.lazy="message">
<div>message</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"liqinggang",
textarea:'',
isRead:false,
gender:'',
favorites:[],
edu:'小学',
fs:[
"足球",
"篮球",
"乒乓球"
],
toggle:''
}
});
</script>
</body>
</html>腾讯云开发者
