Vue:v-model指令

Posted 2020-10-04 吃柚子的小白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue:v-model指令相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<input type="text" v-model="name">{{name}}-->
    <!--&lt;!&ndash;<input type="text" v-model.lazy="name">{{name}}&ndash;&gt; 惰性更新，即当鼠标blur也就是光标不在输入框时再进行更新
    触发change事件-->

    <!--&lt;!&ndash;<input type="text" v-model.trim="name">{{name}}&ndash;&gt;   将输入值的前后空格取消-->
    <!--&lt;!&ndash;<input type="text" v-model.number="name">{{price}}&ndash;&gt; 输入的数字就会方式数字类型，如果不加这个方法html会将输入的数字转换为字符串类型-->
</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"王花花",
            price:10
        }

    })

</script>
</body>
</html>

以上是关于Vue:v-model指令的主要内容，如果未能解决你的问题，请参考以下文章

vue5 v-model详解,绑定事件，修饰符，深度响应式

vue v-model原理实现

VUE v-model事件原理

vue v-model 与组件化的表单组件如何沟通

Vue3：v-model的问题，它不更新组件