● 语法: v-model=“data数据变量”
● 双向数据绑定
○ 数据变化 -> 视图自动同步
○ 视图变化 -> 数据自动同步
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<!-- 绑定输入 -->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<!-- 绑定选择 -->
<div>
<span>来自于哪里?</span>
<select v-model="from">
<option value="西安">陕西-西安</option>
<option value="燕京">北京-燕京</option>
<option value="大连">辽宁-大连</option>
</select>
</div>
<div>
<!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
<input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
<input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
}
}
};
</script>
**
vue指令-v-model修饰符
**
○ v-model.修饰符="vue数据变量"
■ .number 以parseFloat转成数字类型
■ .trim 去除首尾空白字符
■ .lazy 在失去焦点时触发更改而非inupt时
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>