版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
双向数据绑定_v-model指令
1、主要作用
主要作用：从后台获取数据展示到页面表单的输入区域，或者是将页面的输入数据传递到后台进行处理。
2、使用范围*
作用范围：v-model一般只用于表单输入、select和textarea这几种DOM元素。
- input输入框
- select下拉框
- textarea文本输入框
注意：除了以上三种DOM元素，对于其他的DOM元素而言，v-model基本上是不适用的。
3、v-model的常用修饰符
- .lazy：取代input监听change事件, 当输入改变后显示
- .number：将数值型的字符串转换成数值类型
- .trim：去除输入文本的空白字符
4、实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_vue单双向数据绑定_v-model</title>
</head>
<body>
<div class="app">
<!-- 1、input输入框的双向绑定 -->
用户名：<input type="text" v-model.lazy="username">
<p>{{username}}</p>
<!-- 2、下拉框数据的双向绑定 -->
省份：<select v-model="selectId">
<option v-for="v in slt" :value="v.val">{{v.content}}</option>
</select><br>
<!-- 3、文本框的数据绑定 -->
<textarea cols="30" rows="10" v-model.lazy.trim="textareas" style="resize:none;"></textarea><br>
<span>{{textareas}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
username: 'admin',
selectId: '1',
slt: [
{val: 0, content: '请选择省'},
{val: 1, content: '陕西省'},
{val: 2, content: '山西省'},
{val: 3, content: '河北省'},
],
// 文本域的数据输入和获取
textareas: '',
}
});
</script>
</html>