12-不得不学的Vue.js基础之表单输入绑定
前端 · 2020-07-22 ·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单输入绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--1.基础用法：v-model 指定可以在表单 <input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。-->
<!--v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。-->
<!--v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件-->
<!--
· text和textarea 元素使用 value property 和 input 事件
· checkbox 和 radio 使用 checked property 和 change 事件
· select 元素使用 value property 和 change 事件
-->
<!--#1.1.文本-->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!--#1.2.多行文本-->
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">Multiline message is:{{ message2 }}</p>
<!--#1.3.复选框:单个复选框，绑定到布尔值-->
<p><input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label></p>
<!--多个复选框，绑定到同一个数组：-->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<p><span>Checked names: {{ checkedNames }}</span></p>
<!--#1.4.单选按钮-->
<p><input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span></p>
<!--#1.5.选择框-->
<!--#1.5.1单选时
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
-->
<p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</p>
<!--#1.5.2多选时-->
<p>
<select v-model="selected2" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected2 }}</span>
</p>
<!--#1.5.3用v-for渲染动态选项-->
<p>
<select v-model="selected3">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected3 }}</span>
</p>
<!--2.值绑定：对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串（对于复选框也可以是布尔值）-->
<!--2.1.当选中时，`picked2` 为字符串 "a"-->
<p><input type="radio" v-model="picked2" value="apicked2">{{picked2}}</p>
<!--2.2.`toggle` 为 true 或 false -->
<p><input type="checkbox" v-model="toggle">{{toggle}}</p>
<!--2.3.当选中第一个选项时，`selected4` 为字符串 "abc" -->
<p>
<select v-model="selected4">
<option value="abc">ABC</option>
</select>
{{selected4}}
</p>
<!--2.4.有时可能想把值绑定到Vue实例的一个动态 property上，这时可以用v-bind实现。-->
<!--2.4.1复选框-->
<p>
<input
type="checkbox"
v-model="toggle2"
true-value="yes"
false-value="no"
>
{{toggle2}}
</p>
<!--2.4.2单选按钮-->
<p>
<input type="radio" v-model="pick3" v-bind:value="a">{{pick3}}
</p>
<!--2.4.3选择框的选项-->
<p>
<select v-model="selected5">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
{{
selected5.number
}}
</p>
<!--3.修饰符-->
<!--3.1 .lazy 在默认情况下，v-model 在每次input时间触发后将输入框的值与数据进行同步，可以添加lazy 修饰符，转为在 change事件之后进行同步-->
<p><input v-model="message">{{message}}
<br>
<input v-model.lazy="message">{{message}}</p>
<!--3.2 .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符-->
<p><input v-model.number="age">{{age}}</p>
<!--3.3 .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符-->
<input v-model="msg">-{{msg}}-
<input v-model.trim="msg">-{{msg}}-
</div>
<script>
// 全局对象
var vm = new Vue({
el: "#app",
data:{
message:"",
message2:"",
checked:true,
checkedNames: [],
picked:'One',
selected:'',
selected2:[],
selected3: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
picked2:'',
toggle:false,
selected4: '',
toggle2:'no',
a:'zzs',
pick3:'',
selected5:'',
age:'23',
msg:''
}
});
</script>
</body>
</html>以下是测试数据：
Message is: {{ message }}
Multiline message is:{{ message2 }}
Checked names: {{ checkedNames }}
Picked: {{ picked }}
Selected: {{ selected }}
Selected: {{ selected2 }}
Selected: {{ selected3 }}
{{picked2}}
{{toggle}}
{{selected4}}
{{toggle2}}
{{pick3}}
{{ selected5.number }}
{{message}}
{{message}}
{{age}}
-{{msg}}- -{{msg}}-