解决watch监听初始没有值问题

最新推荐文章于 2024-09-04 15:15:55 发布

weixin_43179300

最新推荐文章于 2024-09-04 15:15:55 发布

阅读量849

点赞数

文章标签： vue.js html

本文链接：https://blog.csdn.net/weixin_43179300/article/details/120709168

版权

本文介绍了在 Vue.js 中如何使用 watch 和 computed 属性来过滤列表数据。针对 watch 初始值问题，通过设置 immediate: true 参数确保在组件初始化时即执行过滤操作。同时对比了 watch 和 computed 的实现方式，展示了它们在处理数据变化时的不同策略。

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

在这里插入图片描述
使用watch监听初始的时候没有值，为解决这个问题可以在watch中设 immediate:true,这样初始监听的时候就会先执行一遍handler函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>