v-model
双向绑定
双向绑定以后,表单显示的值只依赖于绑定的数据,不再使用初始化的value属性,在textarea标签之间插入的值也不生效。
v-model
其实是一个语法糖,也可以用@input方法来改写。实际上是自动监听input事件。
使用v-model的例子:
<div id="model"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var app2 = new Vue({ el: "#model", data: { message: "" } }) </script>
还原成监听input时间的例子:
<div id="app"> <input type="text" @input="handleInput" placeholder="输入..."> <p>{{message}}</p> </div> <script> var app = new Vue({ el: "#app", data: { message: "" }, methods: { handleInput: function (e) { this.message = e.target.value; } } }); </script>
单选按钮Radio
单独使用单选按钮,只需要使用其checked属性,绑定一个Vue实例的布尔值属性即可表示选中与否。只需要更改Vue实例的布尔值属性,就可以改变选中的状态。
<div id="app2"> <label>男性 <input type="radio" :checked="check"> </label> </div> <script> var app2 = new Vue({ el: "#app2", data: { check: true } }) </script>
使用多个单选按钮,主要是为了获得被选中的项目的name和value,一般也可能是动态生成的按钮。如果是依赖HTML,则radio控件的name必须相同。
有了Vue之后,无需设置name,只需要把一批按钮都通过v-model绑定给一个属性即可。实际上,只要绑定了同一个属性,即使name不同也没事,所以一般就不设置name属性了。
<div id="app3"> <label>A<input type="radio" v-model="alpha" value="A"></label> <label>B<input type="radio" v-model="alpha" value="B"></label> <label>C<input type="radio" v-model="alpha" value="C"></label> <p>被选中的Radio的Value是:{{alpha}}</p> </div> <script> var app3 = new Vue({ el:"#app3", data:{ alpha: "" } }) </script>
复选框Checkbox
Checkbox单独使用的时候也是直接绑定v-model和checked属性即可。绑定布尔值也可以,但是做不到双向绑定,只能通过Vue实例去控制,所以v-model略好。
<div id="app4"> <label>A <input type="checkbox" value="3" :checked="checked"></label> <p>选择状态: {{checked}}</p> </div> <script> var app4 = new Vue({ el:"#app4", data:{ checked: false } }) </script>
多个复选框的时候,略有变化,单选框是选一个值,而复选框是一系列value属性。
所以这里Vue要绑定的属性是一个数组,与单选框类似,无需设置name,将所有需要复选的内容用v-model绑定到一个Vue实例上即可。
<div id="app5"> <label>A <input type="checkbox" value="A" v-model="content"></label> <label>B <input type="checkbox" value="B" v-model="content"></label> <label>C <input type="checkbox" value="C" v-model="content"></label> <label>D <input type="checkbox" value="D" v-model="content"></label> <label>E <input type="checkbox" value="E" v-model="content"></label> <p>选中的是 {{result}}</p> </div> <script> var app5 = new Vue({ el: "#app5", data:{ content:[] }, computed:{ result: function () { if (this.content.length === 0) { return ""; } else { return this.content; } } } }) </script>
无论是勾选,还是直接将一个对应value的字符串值加入进实例的绑定属性,都可以同步修改复选框的被选中状态。
Select-Option
使用v-model的话,需要绑定在select标签上,而不是option标签上,绑定之后,如果option标签有value属性,则会匹配value属性,否则会匹配option标签的实际内容。
<div id="app6"> <select v-model="select"> <option value="A">AA</option> <option value="B">BB</option> <option value="C">CC</option> <option value="D">DD</option> </select> <p>选中的项目是 {{select}}</p> </div> <script> var app6 = new Vue({ el: "#app6", data: { select:"A" } }) </script>
如果是复选的情况下,给select标签添加multiple属性即可。此时v-model绑定的值变成了数组,所以要给一个空数组。
<div id="app7"> <select v-model="select" multiple> <option value="A">AA</option> <option value="B">BB</option> <option value="C">CC</option> <option value="D">DD</option> </select> <p>选中的项目是 {{select}}</p> </div> <script> var app7 = new Vue({ el: "#app7", data: { select:["A"] } }); </script>
option动态输出
实际业务中option经常是动态输出的,此时需要绑定value和实际内容。
<div id="app8"> <select v-model="select"> <option v-for="opt in options" :value="opt.value">{{opt.text}}</option> </select> <p>选中的项目是 {{select}}</p> </div> <script> var app8 = new Vue({ el: "#app8", data: { select: "AA", options: [ { text: "A", value: "AA" }, { text: "B", value: "BB" }, { text: "C", value: "CC" }, { text: "D", value: "DD" }, ] } }); </script>
下拉菜单组件一般很少使用,因为样式差异比较大,一般还是用单选和复选框多一些。在之后还可以做一个可以复用的组件。
单选的时候绑定数据对象
在实际开发的时候,有时候单选框并不是为了提交数据,而是需要绑定一个特殊的值。如果使用v-model,只能绑定一个字符串或者布尔值。
使用v-bind就可以绑定一个对象。
单选框可以同时绑value和v-model,这样v-model可以取到value的内容。而value可以是一个数据对象。
<div id="app9"> <label>按钮<input type="radio" v-model="picked" :value="value"></label> <p>{{picked.name}}</p> <p>{{value}}</p> </div> <script> var app9 = new Vue({ el:"#app9", data:{ picked:true, value: { name:"jenny" } } }) </script>
这个例子里如果选中,则会显示出value绑定的对象的name属性。
复选框可以添加两个特别的true-value和false-value,选中和不选中的时候控制值。
<div id="app10"> <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"> <p>{{toggle}}</p> <p>{{value1}}</p> <p>{{value2}}</p> </div> <script> var app10 = new Vue({ el:"#app10", data:{ toggle:false, value1: { name:"jenny" }, value2:{ name:"cony" } } }) </script>
说实在在复选框使用这个功能用处不大。倒是v-bind可以绑定一个数据对象,是可以方便很多操作。
如果此时查看元素,可以看到:
<input type="checkbox" true-value="[object Object]" false-value="[object Object]">
这样就不能直接提交表单,必须自己处理过之后才能提交表单。
修饰符
与事件类似,v-model也有修饰符可以使用。
.lazy
,表示v-model不会在input事件中监听,而是监听change事件,而是会在失去焦点或者按回车的时候才更新。
.number
,正常情况下通过HTML得到的值全部是字符串,设置了这个,可以把输入转换成数字。如果输入中含有字符,会自动转换成能够parse出数值的内容。
.trim
,可以自动过滤首尾的空格。
接下来,就是要学习使用Webpack前端工程化开发,和使用Vue的组件了。