08vue_侦听器

桃扇骨 2022-05-31 10:50 171阅读 0赞

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

# 代码： #

## 前端代码： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			请输入您的问题：<input type="text" v-model="question"/><br/>
    			答案在此：{
       {answer}}<br/>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		question:"",
    		answer:""
    	},
    	watch:{
    		question:function(){
    			this.answer="正在查找答案……";
    			this.getAnswer();
    		}
    	},
    	methods:{
    		getAnswer:function(){
    			let thanV = this;
    			fetch("qa.php?Q="+this.question,{
    				method:"GET"
    			})
    			.then((res)=>{
    				return res.text();
    			})
    			.then((res)=>{
    				thanV.answer = res;
    			});
    		}
    	}
    });
    
    </script>

## 后端代码（qa.php）： ##

<?php
    	//1、接收请求参数；
    	$Q = $_GET['Q'];
    	
    	if($Q=="你吃的啥"){
    		echo "草";
    	}else if($Q=="你挤的啥"){
    		echo "奶";
    	}else{
    		echo "智商欠费，没法回答";
    	}
    ?>

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue入门指南——侦听器

目录：一、什么是侦听器？二、侦听器的应用场景三、侦听器的用法四、小案例（验证用户名是否可用）

小鱼儿/ 2023年07月02日 07:26/ 0 赞/ 5 阅读

相关 Vue计算属性和侦听器

计算属性：computed 在模板中放入太多的逻辑会让模板过重且难以维护。（computed的由来有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护）例如：

不念不忘少年蓝@/ 2023年06月08日 04:45/ 0 赞/ 185 阅读

相关 vue侦听器

vue侦听器前言基本用法 immediate选项-立即触发 deep选项-深度监听监听对象属性前言当我们需要对某些数据的变

布满荆棘的人生/ 2022年09月12日 13:51/ 0 赞/ 159 阅读

相关【Vue】—侦听器

【Vue】—侦听器 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

悠悠/ 2022年09月03日 14:20/ 0 赞/ 184 阅读

相关 08vue_侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据

桃扇骨/ 2022年05月31日 10:50/ 0 赞/ 172 阅读

相关 Vue之侦听器watch

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>侦听器</title> <s

╰+哭是因爲堅強的太久メ/ 2022年05月23日 12:50/ 0 赞/ 208 阅读

相关 Vue.js之侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执

本是古典何须时尚/ 2021年11月11日 10:12/ 0 赞/ 277 阅读

相关 Vue侦听器

侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要

古城微笑少年丶/ 2021年10月20日 00:26/ 0 赞/ 278 阅读

相关 Vue计算属性和侦听器

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

柔情只为你懂/ 2021年09月20日 02:34/ 0 赞/ 444 阅读

相关 Vue入门-侦听器

属性的侦听方式有两种： > 1、实例中的watch属性 > > > 2、vm1.$watch 参考代码 <!DOCTYPE html>

刺骨的言语ヽ痛彻心扉/ 2021年09月15日 14:16/ 0 赞/ 292 阅读