第五节：表单标签的用法——value绑定和修饰符
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第五节：表单标签的用法——value绑定和修饰符相关的知识，希望对你有一定的参考价值。
1、表单标签的用法——value绑定和修饰符
value绑定的写法：v-bind:value 或者简写 :value
修饰符: lazy , Number , trim . 用法如： v-model.lazy
2、使用表单的时候需要注意
-
v-bind:true-value和v-bind:false-value 的两个属性只是用在checkbox上
- checkbox和radio需要设置初始值的时候，要在v-model绑定的值上直接设置，不要用html标签属性selected。
3、例子详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="button" v-on:click="printValue" value="输出表单的值" /> <!-- 这样的话，isApple就是true或者false --> <input type="checkbox" v-model="isApple" /> <!-- 这样的话，apple就是a或者b --> <input type="checkbox" v-model="apple" v-bind:true-value="a" v-bind:false-value="b" /> <!-- 这样的话，选中的appleO就是一个对象 ，绑定了对象c--> <input type="radio" v-model="appleO" v-bind:value="c"> <br> <!--在第二节：指令的使用（2）中也提到了表单的修饰符--> <p>lazy 将input的数据改变发生到change事件中，不添加默认是同步改变的。</p> <input type="text" v-model.lazy="appleT" /> <span>{{appleT}}</span> <br> <p>trim 自动过滤用户输入的首尾空格</p> <input type="text" v-model.trim="appleM" /> <span>{{appleM}}</span> <br> <p>自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）</p> <input type="text" v-model.Number="appleN" /> <span>{{typeof appleN}}</span> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { isApple: "", apple: "", a: "1", b: "2", c: { a: 1 }, appleO: "", appleT: "", appleM: "", appleN: "" }, methods: { printValue: function() { var thisData = this.$data; console.log(thisData.isApple); console.log(thisData.apple); console.log(thisData.appleO); } } }); </script> </html>
如果本章没有涉及到的您想看的表单知识，请看 第二节：指令的使用（2）
以上是关于第五节：表单标签的用法——value绑定和修饰符的主要内容，如果未能解决你的问题，请参考以下文章