v-model
实现数据的双向绑定：
1.当你修改数据时候，页面中的展示也会自动变化
2.同样当你修改页面中的数据时，data中的数据也会自动的变化
语法： v-model='data中声明的成员'
-
使用限制：
不是存文本的元素
input
select
textarea
components（Vue中的组件中也有以上三个元素 ）<template> <div class="model"> <p>这个文件讲解v-model双向数据绑定</p> <!-- v-model只支持：input select textarea --> <!-- <p v-model='username'>aa</p> --> <p>登陆</p> <!--trim修饰符去空格--> 用户名：<input type="text" v-model.trim='loginForm.username'> <br> 密码：<input type="text" v-model="loginForm.userpass"> <br> <input type="button" value="登陆" @click='login'> </div> </template> <script> export default { data () { return { // username: '', // userpass: '' loginForm: { username: 'jack', userpass: '123456' } } }, methods: { login () { console.log(this.loginForm) } } } </script> <style lang="less" scoped> </style>
v-model的修饰符:
xixi.png
