Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)
话不多说,先上完整代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> <body> <h2>表单控件</h2> <div id="dr01"> <div> <h4>#Text</h4> <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="please input the message"> </div> <div> <h4>#CheckBox</h4> <input id="checkbox" type="checkbox" v-model="checked" /> <label for="checkbox">the checkbox is checked: {{checked}}</label> <br /> <input type="checkbox" id="box01" value="box01" v-model="checkedNames" /> <label for="box01">box01</label> <input type="checkbox" id="box02" value="box02" v-model="checkedNames" /> <label for="box02">box02</label> <input type="checkbox" id="box03" value="box03" v-model="checkedNames" /> <label for="box03">box03</label> <br /> <span>CheckedNames:{{checkedNames|json}}</span> </div> <div> <h4>#Radio</h4> <input type="radio" id="man" value="man" v-model="picked" /> <label for="man">man</label> <br /> <input type="radio" id="female" value="female" v-model="picked" /> <label for="female">female</label> <br /> <span>Picked: {{ picked }}</span> </div> <div> <h4>#Selected</h4> <p>单选</p> <select v-model="drSelected"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>the single selected is: {{drSelected}}</span> <p>多选</p> <select v-model="drMutiSelected" multiple style="text-align: center; overflow: hidden; width: 50px;"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>ctrl multiple selected:{{drMutiSelected}}</span> <p>动态选项,用v-for渲染:</p> <select v-model="dr02Selected"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>Selected: {{ dr02Selected }}</span> </div> </div> <h2>绑定Value</h2> <div id="dr02"> <input id="02picked" type="radio" v-model="picked" v-bind:value="radio_picked"> <label for="02picked">the radio value:{{picked}}</label> <br /> <input id="02checkbox" type="checkbox" v-model="toggle" v-bind:true-value="check_true" v-bind:false-value="check_false" /> <label for="02checkbox">the checkbox value:{{toggle}}</label> <br /> <select v-model="selected"> <!-- 对象字面量 --> <option v-bind:value="{number:123}">123</option> </select> </div> <h2>参数特性</h2> <div id="dr03"> <h4>#lazy</h4> <!-- 在input元素中添加lazy属性将会当input出发change时候触发数据更新 --> <input id="msg03" v-model="msg03" lazy/> <label for="msg03">the input value is {{msg03}}</label> <h4>#number</h4> <input id="age" v-model="age" type="tel" number/> <label for="age">the age is {{age}}</label> <h4>#debounce</h4> <input id="debounce" v-model="username" debounce="500" /> <label for="debounce">username is {{username}}</label> </div> <script> var dr01 = new Vue({ el: '#dr01', data: { message: "msg", checked: false, drSelected: "", drMutiSelected: "", checkedNames: [], dr02Selected: "", options: [{ text: "one", value: "A" }, { text: "two", value: "B" }, { text: "three", value: "C" }, { text: "four", value: "D" }] } }); var dr02 = new Vue({ el: "#dr02", data: { picked: "unpicked", radio_picked: "picked", toggle: "un_checked", check_true: "checked", check_false: "un_checked", } }); var dr03 = new Vue({ el: "#dr03", data: { msg03: "msg03", age: 12, username: "wangzf", } }); </script> </body> </html>
#1、Text
最常见的input示例:
html
<h4>#Text</h4> <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="please input the message">
然后在js中定义data的message:"msg"
结果展示:
#2、CheckBox
html
第一个复选框没有value属性,绑定了model为"checked",默认值是布尔类型,选中为true,未选中为false。
第二个复选框选项绑定的model是checkedNames,在多个选项中进行多选操作,最终的结果会将checkedNames转化为json数组。
<h4>#CheckBox</h4> <input id="checkbox" type="checkbox" v-model="checked" /> <label for="checkbox">the checkbox is checked: {{checked}}</label> <br /> <input type="checkbox" id="box01" value="box01" v-model="checkedNames" /> <label for="box01">box01</label> <input type="checkbox" id="box02" value="box02" v-model="checkedNames" /> <label for="box02">box02</label> <input type="checkbox" id="box03" value="box03" v-model="checkedNames" /> <label for="box03">box03</label> <br /> <span>CheckedNames:{{checkdNames|json}}</span>
在js中定义初始值checked:false,checkedNames:[](在这里复选框要转化为json格式的数组,所以一定要定义为空的数组,勾选某个选项后,自动更新为新的json数组)
checked: false, checkedNames: [],
结果展示
当选中第一个复选框,第二个复选框按照231的顺序勾选的结果(与数组操作类似,入栈出栈的顺序):
#3、Radio
html
<h4>#Radio</h4> <input type="radio" id="man" value="man" v-model="picked" /> <label for="man">man</label> <br /> <input type="radio" id="female" value="female" v-model="picked" /> <label for="female">female</label> <br /> <span>Picked: {{ picked }}</span>
因为在页面中定义了v-model="picked",所以我们需要在js中的vue组件中定义data的picked属性,如果默认都不选择,则定义picked:"",如果默认选择man,则定义picked:"man",如果默认选择female,则定义picked:"female"。
这里定义的是默认man。
#4、Select
html
<h4>#Selected</h4> <p>单选</p> <select v-model="drSelected"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>the single selected is: {{drSelected}}</span>
在js中的vue组件中定义data属性 drSelected: "",
因为在页面中我们默认选中A,所以即使初始化的时候drSelected是空字符串,页面加载完毕后也会赋值给selected "A"
初始化页面展示:
#5、Select
5.1 多选
html:
<p>多选(按ctrl多选)</p> <select v-model="drMutiSelected" multiple style="text-align: center; overflow: hidden; width: 50px;"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>ctrl multiple selected:{{drMutiSelected}}</span>
在js中定义vue组件的data属性 drMutiSelected: "", 这里和checkbox不同,多选的结果顺序按照从上到下,简单的说就是每个选项都是有序号的,按照序号排列
结果展示:
5.2 select动态渲染
html
<p>动态选项,用v-for渲染:</p> <select v-model="dr02Selected"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>Selected: {{ dr02Selected }}</span>
js中的data属性添加option数组
options: [{ text: "one", value: "A" }, { text: "two", value: "B" }, { text: "three", value: "C" }, { text: "four", value: "D" }]
解释:
在下拉菜单中定义选项为遍历options数组的结果,option显示的是option.text属性,并把对应的值option.value绑定给当前选项
页面初始化:
#绑定Value
<h2>绑定Value</h2> <div id="dr02"> <input id="man02" type="radio" v-model="gender" v-bind:value="man02"> <label for="man02">{{man02}}</label> <input id="female02" type="radio" v-model="gender" v-bind:value="female02"> <label for="female02">{{female02}}</label> <div>your gender is {{gender}}</div> <br /> <input id="02checkbox" type="checkbox" v-model="toggle" v-bind:true-value="check_true" v-bind:false-value="check_false" /> <label for="02checkbox">the checkbox value:{{toggle}}</label> </div>
js中定义的vue组件:
var dr02 = new Vue({ el: "#dr02", data: { gender: "", man02: "man", female02: "female", toggle: "un_checked", check_true: "checked", check_false: "un_checked", selected02: "" } });
解释:
1、radio。
与上面radio不同的是,input中的value值替换成了我们自己定义的数据,将man02和female02的值绑定到了input中,默认不选中某一个,当选中man时,value的值就是data中的man02的值,当选中female时,value的值就是data中的female02的值
2、checkbox。
与上面的checkbox不同,这里的checkbox绑定了选中和未选中的两种状态的值,选中时value为data中的check_true的值,为选中时value为data中的check_false的值。
页面初始化:
#参数特性
<h2>参数特性</h2> <div id="dr03"> <h4>#lazy</h4> <!-- 在input元素中添加lazy属性将会当input出发change时候触发数据更新 --> <input id="msg03" v-model="msg03" lazy/> <label for="msg03">the input value is {{msg03}}</label> <h4>#number</h4> <input v-model="age" number> <label for="age">the age is {{age}}</label> <h4>#debounce</h4> <input id="debounce" v-model="username" debounce="500" /> <label for="debounce">username is {{username}}</label> </div>
在js中添加vue组件
var dr03 = new Vue({ el: "#dr03", data: { msg03: "msg03", age: 12, username: "pxy", } });
理解:
1、lazy,延迟数据更新,这里并不是说取数据的时候才要更新数据,而是说在绑定的值确定发生变化的时候才要更新数据,示例中是id为"msg03"触发onchange的时候更新数据,简单的说就是当input失去焦点的时候触发数据更新。
2、number,在绑定的元素上添加number属性,如果当前的数值可以转化为number,则更新后的数据为number类型,如果当前的数值不能转化为number类型,则更新后的数据一般转化为string类型。
3、debounce,英文的意思是去除抖动。这里设置debounce="500",如果输入过程中两次输入的值的间隔时间不超过500ms,则不触发数据更新,不输入超过500ms则触发数据更新。
结果测试: