Vue中v-model基本使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中v-model基本使用相关的知识，希望对你有一定的参考价值。
参考技术A 结果：
Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。
v-model本质上是个语法糖，其实现原理包含两个步骤
v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息
除了上面的文本类型，v-model还能结合其他类型使用
结果：
结果：
结果：
结果：
v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。 lazy 修饰符可以让数据在失去焦点之后才更新
默认情况下，输入框得到的数据最后都会变成字符串形式。 number 修饰符可以将输入框得到的内容转为数字类型。
trim 修饰符可以去掉从输入框获取的内容的左右两边的空格
vue表单的基本使用
Vue.js 表单
介绍 一下Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -孙叫兽的博客)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>以上是关于Vue中v-model基本使用的主要内容，如果未能解决你的问题，请参考以下文章
676 vue3 v-model：原理，绑定inputtextareacheckboxradioselect，修饰符lazynumbertrim