表单双向绑定

最新推荐文章于 2023-07-08 16:42:03 发布

weixin_30765505

最新推荐文章于 2023-07-08 16:42:03 发布

阅读量170

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d156c94e51d45775b419c18

版权

普通文本输入框双向绑定

<body>
<div id="app">
    <input type="text" v-model="message1" placeholder="编辑...">
        {{message1}}
    <br/>
    <textarea v-model="message2"></textarea>
    {{message2}}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            message1: 'message1',
            message2: 'message2'
        }
    })

</script>
</body>
复制代码

复选框双向绑定

<body>
<div id="app">
    <input type="checkbox" id="apple" value="苹果" v-model="message">
    <label for="apple">苹果</label>
    <input type="checkbox" id="sanxing" value="三星" v-model="message">
    <label for="sanxing">三星</label>
    <input type="checkbox" id="xiaomi" value="小米" v-model="message">
    <label for="xiaomi">小米</label>
    <p>选中：{{message}}</p>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            message: []
        }
    })

</script>
</body>
复制代码

单选框双向绑定

<body>
<div id="app">
    <input type="radio" id="apple" value="苹果" v-model="selected">
    <label for="apple">苹果</label>

    <input type="radio" id="sanxing" value="三星" v-model="selected">
    <label for="sanxing">三星</label>

    <input type="radio" id="xiaomi" value="小米" v-model="selected">
    <label for="xiaomi">小米</label>

    <p>选中：{{selected}}</p>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            selected : '苹果'
        }
    })

</script>
</body>
复制代码

下拉列表双向绑定

<body>
<div id="app">
    <select v-model="selected">
        <option value="">请选择一种手机</option>
        <option value="苹果">苹果</option>
        <option value="三星">三星</option>
        <option value="小米">小米</option>
    </select>

    你选择了：{{selected}}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            selected : ''
        }
    })

</script>
</body>
复制代码

修饰符
1. lazy。< input v-model.lazy="msg" >，在change事件后也就是鼠标光标退出后进行更新vm
2. number。< input v-model.number="age" type="number">，将vm中转成number类型数据
3. trim.< input v-model.trim="msg">,取出vm中的前后空格

转载于:https://juejin.im/post/5d156c94e51d45775b419c18