Vue学习-表单输入绑定 v-model

v-model

• 预期：随表单控件类型不同而不同。

限制：

• </p></li> <li><p>components</p></li> </ul> <p><strong>修饰符：</strong></p> <ul> <li><p>.lazy - 取代 input 监听 change 事件</p></li> <li><p>.number - 输入字符串转为有效的数字</p></li> <li><p>.trim - 输入首尾空格过滤</p></li> <li> <p>用法：</p> <p>在表单控件或者组件上创建双向绑定</p> </li> </ul> <p><strong>简单使用</strong></p> <pre><code> <input v-model="message">单行输入框的输入与message双向绑定 <textarea v-model="message">多行输入框的输入与message双向绑定

  

  1

  

  2

  

  3

  

  4

  

  5

  

  6

  {{ checked }}
Jack John Mike
Checked names: {{ array }}
One
Two
Picked: {{ picked }}
请选择 A B C Selected: {{selected}}
A B C
按住ctrl/command多选 Selectarrayed: {{ selectarrayed }}
{{ option.text }} vForSelected: {{ vForSelected }}


var app32 = new Vue({ el: '#app-32', data: { checked: false, array: [], picked: '', selected: '', selectarrayed: [], vForSelected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ], toggle: '' } })

值绑定
用 v-bind 实现 动态属性 绑定 如上面 （6）
实现值绑定到 Vue 实例的一个动态属性

下面是一些静态字符串绑定
        当选中时，`picked` 为字符串 "a" 
    
        `toggle` 为 true 或 false
    
        当选中第一个选项时，`selected` 为字符串 "abc"
    
        ABC
    

v-model 的修饰符

1

2

3

     

     
         
         
数据是：{{msg1}}
         
         
         
         
         
数据类型是：{{typeof(msg2)}}
         
         
         
         
数据长度是：{{msg3.length}}
     

var app33 = new Vue({
    el: '#app-33',
    data: {
        msg1: '',
        msg2: '',
        msg3: ''
    }
})