vue v-model 双向绑定表单元素的数据:实质是绑定了value、checked、selected属性
用法:可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 忽略
用法:
可以用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇,但 v-model
本质上不过是语法糖。
它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现
v-model
不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。
1. #文本 <input> 元素
绑定 value 属性
例子详解:
VUE 部分:新建vue实例,创建并绑定父元素 #div。创建数据属性 text 并设置初始值 null
var vm = new Vue({
el:"#div",
data:{ text:null }
})
HTML 部分: 用 v-model 绑定数据属性 text。{{ text }} 就是输入框的内容(数据)
<div id="div">
<input v-model="text" placeholder="please enter the text" >
<p>here is the text: {{text}} </p>
</div>
<div id="div">
<input v-model="text" placeholder="please enter the text" >
<p>here is the text:{{text}}</p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{text:null}
})
</script>
网页显示效果
2. # 多行文本 <textarea>
绑定 value 值
<div id="div">
<textarea v-model="text" placeholder="please enter the text" >在这里写文字会显示吗?-不会显示</textarea>
<p>here is the text:{{text}}</p>
</div>
在HTML 的<textarea> (在这里的文字不被显示)</textarea> 元素中间的内容不会被显示
3.# 复选框 <input type="checkbox">
单个选择框绑定 checked 值(布尔值);
多个复选框绑定的是 value 值(数组)
<div id="div">
<input type="checkbox" id="checkbox" v-model="text" />
<label for="checkbox">单个复选框</label>
<p>这里显示数据属性text 的值(布尔值):<span id="important">{{text}}</span></p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{text:null}
})
1)(单选复选框)例子说明:
绑定 checked 值
用v-model="text" 绑定了text 的数据属性。 单个复选框被选中时,text 的值为 true;不被选中时,text 值为 false
<div id="div">
<input type="checkbox" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
<input type="checkbox" id="b"v-model="text" value="banana"/>
<label for="b">香蕉</label>
<input type="checkbox" id="c" v-model="text" value="watermelon"/>
<label for="c">西瓜</label>
<p>这里显示数据属性 text 的值<br />
(原是空数组[ ],被放入被选中的多选框的value的值):<span id="important">{{text}}</span></p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{text:[]}
})
</script>
2)(多选复选框)例子说明:
text 初始值为 空数组 [ ]。选中复选框时,被选中的复选框元素<input > 的 value 值被传入这个数组中
1. 数据属性 text 的初始值是 [ ] 空数组。
var vm = new Vue({
el:"#div",
data:{ text:[ ] }
})
2. 当选中复选框时,{{ text }} 的值是被选中的复选框元素的 value的值(比如说 香蕉 这个<input> 元素设置了value 值是"banana"。当选中这个复选框时,"banana" 这个值被传入了 数据属性 {{text }} 中 )
<input type="checkbox" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
4.#单选按钮 <input type="radio">
绑定value 值
<div id="div">
<input type="radio" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
<input type="radio" id="b"v-model="text" value="banana"/>
<label for="b">香蕉</label>
<input type="radio" id="c" v-model="text" value="watermelon"/>
<label for="c">西瓜</label>
<p>这里显示数据属性 text 的值<br />
(原是空值,被传入被选中的单选按钮的value的值):<span id="important">{{text}}</span></p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{text:""}
})
</script>
<input type="radio" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>选中单选按钮时,{{ text }} 的值是被选中的单选按钮元素的 value 的值 "apple"
5. # 选择框 <select> (单选和多选)
绑定的是子元素 <option>元素 的value 值
<div id="div">
<select v-model="text">
<option >apple</option>
<option>banana</option>
<option>watermelon</option>
</select>
<p>这里显示数据属性 text 的值<br />
(原是空值,被传入被选中的<option> 元素的value值):<span id="important">{{text}}</span>
<br/>
<br/>注意:<option>元素没有设置vaule值时,传入的是这个元素中间的文本
</p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{text:""}
})
</script>
1) 单选<select>
绑定的是子元素 <option>元素 的value 值
注意:
2) 多选 <select multiple>
绑定的是子元素 <option>元素 的value 值
<div id="div">
<select multiple v-model="text">
<option >apple</option>
<option>banana</option>
<option>watermelon</option>
</select>
3. v-for 动态渲染 多选 <select multiple>
<div id="div">
<select v-model="selectedVal" >
<option v-for="option in options">{{option.value}}</option>
</select>
<p>这里显示数据属性 text 的值<br />
(原是空数组,被传入被选中的<option> 元素的value值):<span id="important">{{selectedVal}}</span>
<br/>
</p>
</div>
<script>
var vm = new Vue({
el:"#div",
data:{
selectedVal:"",
options:[
{num:"a",value:"apple"},
{num:"b",value:"banana"},
{num:"c",value:"cherry"}
]
}
})
</script>
例子解析:
1. 因为for 有遍历循环的作用,所以可以利用 v-for 遍历获取 数据属性option 数组元素
<option v-for="option in options" v-bind:value="option.value"> {{option.value}} </option>
这里显示的是<opiton> {{option.value}} </opiton>的值。
2. 选中banana时,{{selected}} 的值也改变为 "banana" 。
因为<select> 元素绑定了 <select v-model="selectedVal" >。selectedVal 数据属性初始值为空。
当选项选定banana时,select 元素的 value 值就是 "banana"。selectedVal 因为双向绑定,值也变成了"banana"
问题: 为什么既要用 v-bind:value="option.value" 绑定<opiton>元素,还要写 <opiton> {{option.value}} </opiton>?
回答:
情况一:不写<opiton> {{option.value}} </opiton>
<select v-model="selectedVal" > <option v-for="option in options" v-bind:value="option.value"></option> </select>
var op=document.getElementsByTagName("option"); alert("option元素的value值是:"+op[0].value+","+op[1].value+","+op[2].value)
1. 下拉列表不显示任何值。
2. 但是可以检测到 option 的value 值
情况二:不绑定v-bind:value="option.value"
<select v-model="selectedVal" > <option v-for="option in options" >{{option.value}}</option> </select>
1. 下拉列表显示了option 的数据属性值。2. 同时可以检测到option的value 值
更多推荐
所有评论(0)