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

v-model

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

限制：

<input>
<select>
<textarea>
components

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
用法：

在表单控件或者组件上创建双向绑定

简单使用

 <input v-model="message">单行输入框的输入与message双向绑定
 <textarea v-model="message"></textarea>多行输入框的输入与message双向绑定

<div id="app-32">
         <!--（1）-->
        <input type="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        
         <!--（2）-->
         <br>
         <input type="checkbox" value="Jack" v-model="array">
         <label for="jack">Jack</label>
         <input type="checkbox" value="John" v-model="array">
         <label for="john">John</label>
         <input type="checkbox" value="Mike" v-model="array">
         <label for="mike">Mike</label>
         <br>
         <span>Checked names: {{ array }}</span>
         
         <!--（3）-->
         <br>
         <input type="radio" value="One" v-model="picked">
         <label for="one">One</label>
         <br>
         <input type="radio" value="Two" v-model="picked">
         <label for="two">Two</label>
         <br>
         <span>Picked: {{ picked }}</span>
         
         <!--（4）-->
         <br>
         <select v-model="selected">
            <option disabled value="">请选择</option>
            <!--如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
            在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。
            因此，更推荐像上面这样提供一个值为空的禁用选项。-->
            <option>A</option>
            <option>B</option>
            <option>C</option>
         </select>
         <span>Selected: {{selected}}</span>
         
         <!--(5) 
                multiple属性规定可同时选择多个选项
                对于 windows：按住 Ctrl 按钮来选择多个选项
                对于 Mac：按住 command 按钮来选择多个选项-->
        <br>
         <select v-model="selectarrayed" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
         </select>
         <br>
         <span>按住ctrl/command多选 Selectarrayed: {{ selectarrayed }}</span>
         
         <!--（6）-->
         <br>
         <select v-model="vForSelected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}            
            </option>
         </select>
         <span>vForSelected: {{ vForSelected }}</span>
         
         <!--（7） -->
         <br>
         <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
     </div>
     
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" 
    <input type="radio" v-model="picked" value="a">
        `toggle` 为 true 或 false
    <input type="checkbox" v-model="toggle">
        当选中第一个选项时，`selected` 为字符串 "abc"
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>

v-model 的修饰符

<!--
     v-model 的修饰符
     
     -->
     <div id="app-33">
     <!--(1)-->
         <input v-model.lazy="msg1">
         <p>数据是：{{msg1}}</p>
         
         <!--（2）-->
         <!--限定只能输入Number-->
         <input type="number" v-model.number="msg2">
         <p>数据类型是：{{typeof(msg2)}}</p>
         
         <!--（3）-->
         <input v-model.trim="msg3">
         <p>数据长度是：{{msg3.length}}</p>
     </div>

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

最后编辑于：2019.04.03 20:35:11