Vue表单与v-model

<template><div><div class="col"><input type="text" v-model="message" placeholder="请输入..."/> <br/><p>输入的内容是: {
   {message}}</p></div><div class="col"><textarea v-model="text" placeholder="输入...."></textarea></div><!--使用v-model，表单控件显示的值只依赖所绑定的数据，不在关心初始化时的value属性，使用v-model时如果有中文输入法输入中文时一般没有选中词, Vue时不会更新数据的，当敲下汉字时才会触发更新。如果希望总时实时更新，可以用@input来代替v-model.--><div class="col"><input type="text" @input="handleInput" placeholder="请输入..." /><p>输入的内容是：</p><p style="white-space: pre">{
   {text}}</p></div><!-- 单选按钮 单独使用直接v-bind --><div class="col">单独使用按钮:<input type="radio" :checked="picked" /><br><p>您的性别是：{
   {picked}}</p></div><!-- 单选按钮, 如果是互斥选择的效果, 就需要使用v-model配合value来使用 --><div class="col"><label>性别:</label><input type="radio"  v-model="picked" value="女" id="sex"/> <label for="sex">女</label><br><input type="radio"  v-model="picked" value="男" id="man" /> <label for="man">男</label><br><p>您的性别是：{
   {picked}}</p></div><!-- 复选框 单独使用 v-model 绑定一个布尔类型的值 --><div class="col"><label for="pwd">是否记住密码:</label><input type="checkbox"  v-model="picked" id="pwd"/><p>您的性别是：{
   {picked}}</p></div><!-- 复选框多选, 多个勾选都绑定到同一个数组类型的数据上 --><div class="col"><input type="checkbox" v-model="checkedArray" value="小说" id="novel"/><label for="novel">HTML</label><input type="checkbox" v-model="checkedArray" value="IT" id="it"/><label for="novel">IT</label><input type="checkbox" v-model="checkedArray" value="美女" id="girl" /><label for="novel">美女</label><p>请选择爱好：{
   {checkedArray}}</p></div><!--选择列表:(单选)option是备选项，如果含有value的值就会优先匹配value的值，如果没有就会直接匹配option的text,--><div class="col"><select v-model="selected"><option>html</option><option value="js">JavaScript</option><option value="java">Java</option></select><p>您选择的项目是：{
   {selected}}</p></div><!--  选择列表(多选):给<select>添加multiple属性--><div class="col"><select v-model="courses" multiple><option value="Math">Math</option><option value="English">English</option><option value="Chinese">Chinese</option></select><p>您选择的课程是：{
   {courses}}</p></div><!--动态输出<option>虽然选择列表<select>控件可以很简单的完成下拉选择的需求,但在实际业务中反而不常用，因为样式依赖平台和浏览器，无法统一，也不太美观。功能受限，不支持搜索, 所以常见的解决方案是用div模拟一个类似的控件。--><div><select v-model="selectedGame" multiple><option v-for="game in games" :value="game.value">{
   {game.text}}</option></select><p>您选择的项目是：{
   {selectedGame}}</p></div><!--绑定值, 单选、复选框、下拉列表在单独使用的模式下, v-model绑定的值是一个静态字符串或者布尔值, 但在业务中有时需要绑定一个动态的数据可以使用v-bind来实现--><div><input type="radio" v-model="picked" :value="value"/><label>单选按钮</label><P>{
   {picked}}</P></div><!-- 复选框 动态绑定值 --><div><input type="checkbox" v-model="toggle":true-value="value1":false-value="value2"/><label>复选按钮</label><P>{
   {toggle}}</P></div><!--修饰符.lazy 在输入框时 v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步,message并不是实时改变的，而是在失去焦点或者按回车的时候才会更新--><input type="text" v-model.lazy="message" /><p>输入的内容：{
   {message}}</p><!-- 使用修饰符.number 可以将输入转换为Number类型，否则虽然你输入的数字，但它的类型其实是String,在数字输入框时会比较有用 --><input type="text" v-model.number="numberText"/><p>输入的内容：{
   { typeof numberText}}</p><!-- 使用修饰符.trim 可以自动过滤输入的首尾空格 --><input type="text" v-model.trim="trimText"/><p>输入的内容：{
   {trimText}}</p><p>内容长度：{
   {trimText.length}}</p></div></template><script>
export default {name: 'HelloWorld',data () {return {message: '',text: '',picked: true,value: '123',checkedArray: [],selected: '',courses: [],selectedGame: [],toggle: false,value: '教徒',value1: "秦时明月",value2: "大唐风月",numberText: '',trimText: '',games: [{value: 'CF', text: "穿越火线"},{value: 'LOL', text: "英雄联盟"},{value: 'NZ', text: "逆战"},{value: 'CS', text: "反恐精英"}]}},methods: {handleInput: function (e) {this.text = e.target.value;}}
}
</script><style scoped>input[type=text] {width: 350px;height: 30px;padding-left: 15px;}textarea {width: 340px;height: 60px;padding: 15px;}input[type=radio] {width: 20px;height: 20px;margin-bottom: 10px;}.col {width: 500px;margin: 0 auto;}
</style>