表单绑定v-model

最新推荐文章于 2023-08-10 09:34:48 发布

坏萝卜

最新推荐文章于 2023-08-10 09:34:48 发布

阅读量149

点赞数

分类专栏： vue2 文章标签： vue

本文链接：https://blog.csdn.net/qq_52135740/article/details/118581094

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

表单绑定v-model

vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model原理：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

<body>
    <div id="app">
        <input type="text" v-model="message">
        <input type="text" v-bind:value="message" v-on:input="valueChange">
        <input type="text" :value="message" @input="message = $event.target.value">
        <h2>{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hahaha'
        },
        methods: {
            valueChange(event) {
                this.message = event.target.value
            }
        }
    })
</script>

v-model结合radio使用

<body>
    <div id="app">
        <label for="man">
            <input type="radio" id="man" value="男" name="sex" v-model="sex">男
        </label>
        <label for="woman">
            <input type="radio" id="woman" value="女" name="sex" v-model="sex">女
        </label>
        <h2>你选择的是：{{sex}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: ''
        }
    })
</script>

v-model结合checkbox使用

<body>
    <div id="app">
        <!-- checkbox单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <button :disabled="!isAgree">下一步</button>
        <!-- checkbox多选框 -->
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你喜欢的兴趣有: {{hobbies}}</h2>
    </div>

</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isAgree: false,
            hobbies: []
        }
    })
</script>

v-model结合select使用

单选：只能选中一个值

v-model绑定的是一个值。

当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组。

当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<body>
    <div id="app">
        <select v-model="mySelect">
            <option value="葡萄">葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="梨子">梨子</option>
            <option value="苹果">苹果</option>
        </select>
        <h2>你喜欢的水果有: {{mySelect}}</h2>
        <select v-model="mySelects" multiple>
            <option value="葡萄">葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="梨子">梨子</option>
            <option value="苹果">苹果</option>
        </select>
        <h2>你喜欢的水果有: {{mySelects}}</h2>
    </div>

</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            mySelect: '',
            mySelects: []
        }
    })
</script>

input值绑定

<body>
    <div id="app">
        <label v-for="item in orginHobbies" :for="item">
            <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
        </label>
        <h2>你喜欢的运动有:{{hobbies}}</h2>
    </div>

</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isAgree: false,
            hobbies: [],
            orginHobbies: ['篮球', "高尔夫球 ", "羽毛球", "乒乓球", "足球", "台球"]
        }
    })
</script>

修饰符

lazy修饰符：

1.默认情况下,v-model默认是在input事件中同步输入框的数据的。

2.也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

3.lazy修饰符可以让数据在失去焦点或者回车时才会更新

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

number修饰符：

1.默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

2.但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

3.number修饰符可以让在输入框中输入的内容自动转成数字类型

<input type="text" v-model.number="number">

trim修饰符：

1.如果输入的内容首尾有很多空格，通常我们希望将其去除

2.trim修饰符可以过滤内容左右两边的空格

<input type="text" v-model.trim="number">

坏萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单绑定v-model

表单绑定v-modelvue中使用v-model指令来实现表单元素和数据的双向绑定。v-model原理：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件<body> <div id="app"> <input type="text" v-model="message"> <input type="text" v-bind:value="message" v-on:input="val
复制链接

扫一扫

专栏目录