07_Vue指令篇之双向数据绑定_v-model指令

最新推荐文章于 2021-04-11 21:03:26 发布

嫣夜来

最新推荐文章于 2021-04-11 21:03:26 发布

阅读量188

点赞数 1

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/102494146

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

双向数据绑定_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/vue@2.6.10/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>

嫣夜来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07_Vue指令篇之双向数据绑定_v-model指令

双向数据绑定_v-model指令1、主要作用主要作用：从后台获取数据展示到页面表单的输入区域，或者是将页面的输入数据传递到后台进行处理。2、使用范围*作用范围：v-model一般只用于表单输入、select和textarea这几种DOM元素。input输入框select下拉框textarea文本输入框注意：除了以上三种DOM元素，对于其他的DOM元素而言，v-model基本上是不...
复制链接

扫一扫