美文网首页VueVue学习让前端飞
vue学习笔记7——v-model

vue学习笔记7——v-model

作者: 椰果粒 | 来源:发表于2017-07-25 18:27 被阅读172次

    ** 双向数据绑定的几个修饰符**

    • v-model.lazy 当焦点离开输入框时才进行渲染
    • v-mmodel.number 输入框里边必须是数字,否则会清空。当先输入字符串后输入数字,就无法将字符串省略掉
    • v-model.trim 清空空格
    <p>原始数据:{{message}}</p>
    <h3>文本框</h3>    
    <input type="text" v-model="message"><br>
    <input type="text" v-model.lazy="message"><br>
    <input type="text" v-model.number="message"><br>
    <input type="text" v-model.trim="message"><br>
    <hr>
    <h3>文本域</h3>
    <textarea v-model="message"></textarea>
    <hr>
    <h3>多选框</h3>
    <input type="checkbox" id="checkbox" v-model="isTrue">
    <label for="checkbox">{{isTrue}}</label>
    <hr>
    <h3>多选框绑定一个数组</h3>
    <p>
        <input type="checkbox" id="zhang" value="zhangsan" v-model="names">
        <label for="zhang">zhangsan</label>
        <input type="checkbox" id="li" value="lisi" v-model="names">
        <label for="zhang">lisi</label>
        <input type="checkbox" id="wang" value="wangwu" v-model="names">
        <label for="zhang">wangwu</label>
    </p>
    <p>{{names}}</p>
    <hr>
    <h3>单选按钮的双向数据绑定</h3>
    <p>
        <input type="radio" id="man" value="男" v-model="sex">
        <label for="man">男</label>
        <input type="radio" id="woman" value="女" v-model="sex">
        <label for="woman">女</label>
        <p>你选择的性别是:{{sex}}</p>
    </p>
    
    var a = new Vue({
        el : "#app",
        data : {
            message : "hello world",
            isTrue : false,
            names : [],
            sex : "男"
        }
    })
    

    单选下拉菜单

    <div id="app6">
        <select v-model="selected">
            <option disabled>please select one</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>selected : {{ selected }}</span>  
    </div>
    
        var app6 = new Vue({
            el : "#app6",
            data : {
                selected : ' '
            }
        });
    

    多选下拉菜单

    <div id="app7">
        <select v-model="selected" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>selected : {{ selected }}</span>
    </div>
    
    selected : []
    

    绑定下拉菜单,且名称与之对应

    <div id="app8">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>
        <span> selected : {{ selected}}</span>
    </div>
    
    var app8 = new Vue({
        el : '#app8',
        data : {
            selected : 'A',
            options : [
                {text : 'one', value : 'A'},
                {text : 'two', value : 'B'},
                {text : 'three', value : 'C'}
            ]
        }
    })
    

    相关文章

      网友评论

        本文标题:vue学习笔记7——v-model

        本文链接:https://www.haomeiwen.com/subject/zlfgkxtx.html