v-model双向数据绑定

最新推荐文章于 2023-12-12 08:30:00 发布

冰雪奇缘lb

最新推荐文章于 2023-12-12 08:30:00 发布

阅读量155

点赞数

分类专栏： Vue 文章标签： v-model双向绑定

本文链接：https://blog.csdn.net/weixin_44682587/article/details/102943131

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-model

v-model是在表单控件或组件上创建双向绑定。使我们输入的内容能够动态改变data中变量的值并输出，参考API来看看具体功能
v-model可以被.lazy、.number、.trim修饰，具体功能api上介绍的很详细，lazy这个功能可能介绍的比较难懂，经过测试它的功能就是当鼠标失去焦点是修改输入内容，而不是时刻监听，提高了项目性能。
代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>双向数据绑定 input、select、textarea</h1>
        <label>姓名</label>
        <input type="text" v-model="name">
        <span>{{name}}</span>
        <label>年龄</label>
        <input type="text" v-model.lazy="age">
        <span>{{age}}</span>
    </div>

</body>
<script>
    new Vue({
        el: '#vue-app',
        data() {
            return {
                name: '',
                age: 30,
            };
        },
        methods: {

        }
    })
</script>

</html>

冰雪奇缘lb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model双向数据绑定

v-modelv-model是在表单控件或组件上创建双向绑定。使我们输入的内容能够动态改变data中变量的值并输出，参考API来看看具体功能v-model可以被.lazy、.number、.trim修饰，具体功能api上介绍的很详细，lazy这个功能可能介绍的比较难懂，经过测试它的功能就是当鼠标失去焦点是修改输入内容，而不是时刻监听，提高了项目性能。代码示例如下：<!DOCTY...
复制链接

扫一扫

专栏目录