vue基础知识(七)——侦听器

最新推荐文章于 2024-05-31 17:44:24 发布

一只没有感情的小杀手

最新推荐文章于 2024-05-31 17:44:24 发布

阅读量343

点赞数

分类专栏： Vue基础知识及实战精华文章标签： vue

本文链接：https://blog.csdn.net/qq_40556950/article/details/105246422

版权

Vue基础知识及实战精华专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文探讨了Vue中的侦听器（watch）功能，重点在于其应用场景——在数据变化时执行异步或资源密集型操作。通过示例说明了如何使用侦听器，与计算属性（computed）的区别，以及在特定情况下，如输入验证时，只有使用侦听器才能实现预期功能。

摘要由CSDN通过智能技术生成

侦听器

侦听器的应用场景

数据变化时执行异步或开销较大的操作
侦听器的用法

侦听器watch和计算属性computed有点像，在下述中使用侦听器，当改变input框中的值时，div里面显示的值才会发生相应变化。注意：watch中方法名称要和data中属性名称一致！

template中：
           <input type="text" v-model='firstName'>
           <input type="text" v-model='lastName'>
           <div>{{fullName}}</div>

script中：
var vm =new Vue({
			el:"#app",
			data:{
				firstName: 'Zhou',
				lastName: 'LiYing',
				fullName: 'Zhou LiYing'
			},
			watch: {
			    // 定义函数时函数名要和data中的数据名一致
				firstName: function(val){
					this.fullName = val + '' + this.lastName
				},
				lastName: function(val){
					this.fullName = this.firstName + '' + val
				}
			｝
		})

下述中使用计算属性，效果和使用侦听器效果一样，但是在这个案例中计算属性computed还要更简单一点。

template中：
           <input type="text" v-model='firstName'>
           <input type="text" v-model='lastName'>
           <div>{{totalName}}</div>

script中：
var vm =new Vue({
			el:"#app",
			data:{
				firstName: 'Zhou',
				lastName: 'LiYing',
			},
			computed: {
				totalName: function(){
					return this.firstName + ' ' + this.lastName
				}
			}
		})

侦听器的特定用法
在有的特定场景下使用计算属性computed是解决不了问题的，只有用侦听器watch才行。
比如当你输入一个用户名，失去焦点时要对用户名进行监听是否已经存在并给出相应的提示。

<!DOCTYPE html>
<html>
<head>
	<title>测试vue</title>
</head>
<body>
	<div id="app">
		<div>
			<input type="text" v-model.lazy='uName'>
			<span>{{tips}}</span>
		</div>
		<!-- 
			侦听器
			1.采用侦听器监听用户名的变化
			2.调用后台接口进行验证
			3.根据验证的结果调整提示信息
		 -->	
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script type="text/javascript">
		var vm =new Vue({
			el:"#app",
			data:{
				uName: '',
				tips: ''
			},
			methods: {
				checkName: function(uname){
					// 调用接口，但是可以使用定时任务的方式模拟接口调用
					var that = this
					setTimeout(function(){
						// 模拟接口调用
						if(uname == 'admin') {
							that.tips = '用户名已经存在，请更换'
						}else{
							that.tips = '用户名可以使用'
						}
					},1000)
				}

			},
			watch: {
				uName: function(val){
					// 调用后台接口验证用户名的合法性
					this.checkName(val)
					// 修改提示信息
					this.tips = '正在验证...'
				}
			}
		})
	</script>
</body>
</html>

最终效果：