1.1 v-model的基本使用
v-model双向绑定,既输入框的value改变,对应的message对象值也会改变,修改message的值,input的value也会随之改变。无论改变那个值,另外一个值都会变化。
输入框内容修改,message也修改,修改message,input内容也修改,双向绑定
<body>
<div id="app">
<input type="text" v-model.lazy='message'>
<h3>{
{
message }}</h3>
</div>
<script src="../vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
- lazy默认情况下是实时更新数据,加上lazy,从输入框失去焦点,按下enter都会更新数据。
- number,默认是string类型,使用number复制为number类型。
- trim用于 自动过滤用户输入的首尾空白字符
1.2 v-model的原理
先来一个demo实现不使用v-model实现双向绑定。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="app">
<input type="text" @input='textChange' :value=