欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE之 v-model的使用

程序员文章站 2024-03-20 17:40:28
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="name">
        <span>My name is :{{ name }}</span>
    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
	var app = new Vue({
    el:'#app',
    data:{
        name:"Vues",
    }
});

</script>
</html>

v-model实时更新vue内的“name”

v-moudel有以下常用的方法:

v-model.lazy  #惰性事件,不自动更新(一般用于注册时输入完成时验证,可以提高一点点性能)
v-model.trim #去除左右两边的空格
v-model.number #将字符串自动转换成整行
相关标签: 学习记录 vue