v-model

最新推荐文章于 2024-04-18 16:58:47 发布

Yunjinismine

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量369

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/Yunjinismine/article/details/136824476

版权

本文详细解析了v-model在Vue.js中的工作原理，包括其作为双向数据绑定的机制，如何与表单元素结合，以及修饰符如.lazy的使用。还介绍了与之相关的Vue.jsdevtools扩展工具和一些常见用法示例。

摘要由CSDN通过智能技术生成

v-model的原理：

v-model是什么
1.双向数据绑定，既可以拿取data的数据，也可以写入数据
2.v-model本身是一个语法糖，一般用于表单收集
3.v-model自动绑定表单value值 v-model=“”
v-model原理
1.使用v-bind绑定数据
2.使用oninput传递数据
vue.js devtools扩展工具
v-model修饰符
.lazy 失去焦点后提交值
.number有效转换"1"== 1 为数字
.trim清除前后空格

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" :value="val" @input="func()">
            {{val}}
            <input type="submit" @click="fun1()">
        </div>
    </div>
</body>
<script src="../vue.js代码/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                val:"我是默认数",
            }
        },
        methods: {
            // window.event==e
            // 不同：e定义函数后不要加(),event可加可不加
            // 相同：取到操作元素的所有方法
            func(){
                console.log(11111111111);
                console.log(event);
                console.log(event.target);
                return this.val=event.target.value;
            },
            fun1(){
                // console.log(event);
                console.log(window.event);
            },
        },
    })
</script>

Yunjinismine

关注

6
点赞
踩
7

收藏

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

3.v-model自动绑定表单value值 v-model=“”1.双向数据绑定，既可以拿取data的数据，也可以写入数据。2.v-model本身是一个语法糖，一般用于表单收集。.number有效转换"1"== 1 为数字。vue.js devtools扩展工具。2.使用oninput传递数据。1.使用v-bind绑定数据。.lazy 失去焦点后提交值。.trim清除前后空格。v-model是什么。v-model修饰符。
复制链接

扫一扫