作用：
表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。
v-model会忽略所有表单元素的value、checked、selected特性的初始值
而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。
普通文本框上的使用/多行文本框上的使用
.lazy：默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发
.number：自动将用户的输入值转为数值类型（如果能转的话）【作用：如果收集到的数据需要用于数学计算，则省去自行转化数据类型的操作】
.trim：自动过滤用户输入的首尾空白字符
<body>
<div id="app">
<!-- 普通文本框 -->
<p>{{username}}</p>
<div><input type="text" :value="username" @input="username=$event.target.value"/></div>
<!-- 简写方式 -->
<div><input type="text" v-model="username" /></div>
<!-- 失去焦点时触发 -->
<div><input type="text" v-model.lazy="username" /></div>
<!-- 自动过滤用户输入的首尾空白字符 -->
<div><input type="text" v-model.trim="username" /></div>
<!-- 自动将用户的输入值转为数值类型 -->
<div></div><input type="text" v-model.number="count" /></div>
<hr />
<!-- 文本域 -->
<p>{{morestr}}</p>
<textarea cols="30" rows="10" v-model="morestr"></textarea>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
username: "zhangsan",
morestr:"推进全面依法治国是国家治理的一场深刻变革，必须以科学理论为指导。前不久召开的中央全面依法治国工作会议，明确了习近平法治思想在全面依法治国中的指导地位。习近平法治思想从历史和现实相贯通、国际和国内相关联、理论和实际相结合上深刻回答了新时代为什么实行全面依法治国、怎样实行全面依法治国等一系列重大问题，是顺应实现中华民族伟大复兴时代要求应运而生的重大理论创新成果，是马克思主义法治理论中国化最新成果，是习近平新时代中国特色社会主义思想的重要组成部分，是全面依法治国的根本遵循和行动指南。全党全国要认真学习领会习近平法治思想，吃透基本精神、把握核心要义、明确工作要求，切实把习近平法治思想贯彻落实到全面依法治国全过程。",
},
});
</script>复选框上的使用
注意：此种用法需要input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致
<body>
<div id="app">
<!-- 单个复选框 -->
<input type="checkbox" v-model="isChecked" />我阅读并同意注册许可协议
<hr>
<!-- 多个复选框 -->
<div>
<p>爱好：</p>
<input type="checkbox" value="C" v-model="hobbies"/>🍎
<input type="checkbox" value="T" v-model="hobbies"/>🍑
<input type="checkbox" value="R" v-model="hobbies"/>🍌
<input type="checkbox" value="L" v-model="hobbies"/>🏀🌰✈🚂🚕☀
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isChecked: true,
// 初始元素的值是用于定义哪些被选中，如果为空数组则全部不选中
hobbies: ['T','C']
},
});
</script>单选按钮上的使用
<body>
<div id="app">
<!-- 单选按钮 -->
<div>
性别：
<input type="radio" name="gender" value="男" v-model="gender">男
<input type="radio" name="gender" value="女" v-model="gender">女
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
gender: '女',
},
});
</script>下拉框上的使用
<body>
<div id="app">
<!-- 下拉列表 -->
<p>城市：</p>
<select v-model="selected">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>TianJin</option>
</select>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
selected: 'TianJin',
},
});
</script>
Comments | NOTHING