vue.js实战 第一篇 第六章 表单与v-model

输入框 文本域

<div id="app">
    <input type="text" v-model="message">
    <p>输入的内容是：{{message}}</p>
</div>
<script>
    var app=new Vue({
        el: 'app',
        data:{
            message:''
        }
    })
</script>

注意：文本域也一样，不过使用v-model后，value值不起作用，<textarea></textarea>之间的值也不会生效。

测试一下@input代替v-model

<div id="app">
    <input type="text" @input="handleInput">
    <p>input message:{{message}}</p>
</div>
<script>
    var app=new Vue({
        data: {message:''},
        methods:{
            handleInput:function(e){
                this.message=e.target.value;
            }
        }
    })
</script>

这个在汉字输入时触发更新有不同。

单选按钮

单独使用，不需要v-model，直接用v-bind

<input type="radio" :checked="picked">

组合使用实现互斥

<input type="radio" v-model="picked" value="html" id="html">
<label for="html">Html</label>
<input type="radio" v-model="picked" value=js" id="js">
<p>selected item:{{picked}}</p>
<script>
data:{
    picked:'js'
}

复选框

<!--单个-->
<div id="app">
    <input type="checkbox" v-model="checked" id="checked">
</div>
<script>
    data:{ checked:false}
</script>

<!--多个-->
<div id="app">
    <input type="checkbox" v-model="checked" value="html" id="html">
    <input type="checkbox" v-model="checked" value="js">
    <p>selected item:{{checked}}</p>
</div>
<script>
    data:{ checked:['html','js']}
</script>

选择列表

<!--单选-->
<div id="app">
    <select v-model="selected">
        <option>html</option>
        <option value="js">javascript</option>
    </select>
    <p>selected item:{{selected}}</p>
</div>
<script>
    data:{selected:'html'}
</script>

<!--多选-->
<select v-model="selected" multiple>
data:{selected:['html','js']

<!--实际业务-->
<select v-model="selected">
    <option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
data:{
    selected:'html',
    options:[
        {
            text:'Html',
            value:'html'
        },
        {...}
    ]
}

注意：实际业务中，select的样式依赖平台和浏览器，无法统一，不美观，功能受限，常见的解决方案是用div模拟。

动态绑定值

单选

<input type="radio" v-model="picked" :value="value">
data:{
    picked:false,
    value:123
}

复选

<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
data:{
    toggle:false,
    value1:'a',
    value2:'b'
}

选择列表

<select v-model="selected">
    <option :value="{number:123}">123</option>
</select>
data:{selected:''}

修饰符

.lazy change事件中同步

<input type="text" v-model.lazy="message">

.number 将输入转换为number类型

<input type="number" v-model.number="message">
data:{message:123}

.trim