4、$watch的用法

最新推荐文章于 2021-11-16 20:48:16 发布
最新推荐文章于 2021-11-16 20:48:16 发布
阅读量640 收藏
点赞数 1
文章标签： AngularJs watch

1、$watch的用法

      1.1 利用$watch来观察对象属性数值的变化

            1.用$watch来观察,iphone.money的改变
            2.用iphone.money表示,而不是$scope.iphone.money

            3.要加单引号'iphone.money' 

            4.代码

<!DOCTYPE html>
<html ng-app>

	<head>
		<meta charset="UTF-8">
		<title>购物金额的计算</title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript">
			function Aaa($scope) {
				$scope.iphone = {
					money: 5,
					num: 1,
					fre: 10
				}
				$scope.sum = function() {
						return $scope.iphone.money * $scope.iphone.num;
					}
					/*用$watch来观察,iphone.money的改变*/
					/*1、用iphone.money表示,而不是$scope.iphone.money
					  2、要加单引号'iphone.money'
					 * */
				$scope.$watch('iphone.money', function(newVal, oldVal) {
					console.log(newVal);
					console.log(oldVal);
				});
			}
		</script>
	</head>

	<body>
		<div ng-controller="Aaa">
			<p>价格:<input type="text" ng-model="iphone.money" /></p>
			<p>个数:<input type="text" ng-model="iphone.num" /></p>
			<p>费用:<span>{{sum() | currency:"￥"}}</span></p>

		</div>
	</body>

</html>
        1.2 利用$watch来观察对象的变化

               1.用$watch来观察,iphone的改变

               2.用iphone表示,而不是$scope.iphone

               3.要加单引号'iphone'

               4.第三个参数要为true

               5.代码

<!DOCTYPE html>
<html ng-app>

	<head>
		<meta charset="UTF-8">
		<title>购物金额的计算</title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript">
			function Aaa($scope) {
				$scope.iphone = {
					money: 5,
					num: 1,
					fre: 10
				}
				$scope.sum = function() {
						return $scope.iphone.money * $scope.iphone.num;
					}
					/*用$watch来观察,iphone的改变*/
					/*1、用iphone表示,而不是$scope.iphone
					  2、要加单引号'iphone'
					  3、第三个参数要为true
					 * */
				$scope.$watch('iphone', function(newVal, oldVal) {
					console.log(newVal);
					console.log(oldVal);
				}, true);
			}
		</script>
	</head>

	<body>
		<div ng-controller="Aaa">
			<p>价格:<input type="text" ng-model="iphone.money" /></p>
			<p>个数:<input type="text" ng-model="iphone.num" /></p>
			<p>费用:<span>{{sum() | currency:"￥"}}</span></p>

		</div>
	</body>

</html>
         1.3 利用$watch来观察函数返回数值的变化

            1.用$watch来观察,$scope.sum函数返回数值的改变
            2.用$scope.sum表示
            3.不要加单引号,$scope.sum

            4.代码

<!DOCTYPE html>
<html ng-app>

	<head>
		<meta charset="UTF-8">
		<title>购物金额的计算</title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript">
			function Aaa($scope) {
				$scope.iphone = {
					money: 5,
					num: 1,
					fre: 10
				}
				$scope.sum = function() {
						return $scope.iphone.money * $scope.iphone.num;
					}
					/*用$watch来观察,$scope.sum函数返回数值的改变*/
					/*1、用$scope.sum表示
					  2、不要加单引号,$scope.sum
					 * */
				$scope.$watch($scope.sum, function(newVal, oldVal) {
					console.log(newVal);
					console.log(oldVal);
				});
			}
		</script>
	</head>

	<body>
		<div ng-controller="Aaa">
			<p>价格:<input type="text" ng-model="iphone.money" /></p>
			<p>个数:<input type="text" ng-model="iphone.num" /></p>
			<p>费用:<span>{{sum() | currency:"￥"}}</span></p>

		</div>
	</body>

</html><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     </span>

Bwz_Learning
关注
Vue.js 中的 $watch使用方法
10-19
以下是详细说明Vue.js中的$watch使用方法的知识点： 一、$watch的基本使用 在Vue实例中，可以使用$watch属性来设置一个监听器，它接受三个参数：一个字符串或对象，一个回调函数，以及可选的配置对象。字符串形式...
Angular中的$watch方法详解
08-29
在使用$watch方法时，如果要监听的对象是一个对象或者数组，那么可以使用第三个参数deepWatch来指定是否对监听的对象进行深层次的检查。例如： ``` $scope.data = { name :'李四', count:20 } $scope.$watch('data...
angular $watch
weixin_30512785的博客
09-22 180
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。...
AngularJs学习笔记(4)--$scope里的$watch方法
weixin_33970449的博客
06-12 651
本文主要接住前文简单介绍一下angular中的$watch方法在前面介绍过$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watc...
$watch的用法
Irmhy
09-23 2173
2016-09-23 今天周五~周五~[ 转圈 ] 今天来说的是ng中内置的使用较多的函数 $watch 在这说一下 ng-options这种写法，是将names这个数组中的name值显示在下拉列表中，或者是a as a.name for a in names 这无非区别是是将整个对象当作参数处理还是具体到某个属性。 angular.module('myApp', []) .co
VueJs探索之watch用法详解
热门推荐
itKingOne的博客
04-07 10万+
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。 var vm = new Vue( { el: '#app', data: { childrens:
angular--$watch监视用法
nuanxiasuiyuan的博客
04-26 3026
$watch()函数，用于监视模型数据的变化。 $watch(参数1,参数2,参数3) 参数1：监视的对象 参数2：监视数据改变执行的函数 参数3：[可选]，布尔值-默认为fasle：不监视对象深沉属性，true：监视对象深层属性。 1. 监听单个普通变量 $scope.$watch("name", function() { name属性发生变化执行的函数代码 }) 2. 监听多
AngularJS中$apply方法和$watch方法用法总结
11-27
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考，具体如下： 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了解，所以在网上...
详解vue2 $watch要注意的问题
08-29
4. 使用 `$set` 方法时，需要注意对象的变化 在使用 `$set` 方法时，需要注意对象的变化。如果我们更新一个对象的某个属性，将会触发该属性的监听函数。例如： ```javascript mounted() { this.$set(this.msgs, ...
理解vue中$watch使用
前端精髓
11-28 2万+
侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。 假设 data 定义的数据如下： data() { return { a: 1, b: 2, c: { d: 3, e: 4 } } }, 单个的顶层属性，第一个参数是字符串，第二个参数是函数。 created()
vue-$watch的使用
01-21 208
// $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }); 这是$watch的一个用法。其中a不能是一个对象或者数组： 1、如果是个对象 // $watch 是...
vue_$watch用法
weixin_30614109的博客
02-05 134
vue_$watch用法 <div id="watch"> <input type="text" v-model="msg"> {{msg}} <button @click="update"></button> </div> < <s...
$watch和watch属性的使用
weixin_30362801的博客
05-16 977
$watch和watch属性都是监听值的变化的,是同一个作用，但是有两个不同写法。 用法一： this.$watch((newVal,oldVal)=>{ }) 注意：这种方法是监听不到对象的变化的。 用法二： watch:{ xxx：（newVal,oldVal)=>{ // xxx是data里的数据 } }...
$watch方法的应用
斟茶冰冰yozi的博客
11-16 316
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>watch</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"&g
watch 使用
IT_Top
07-23 344
1、watch监听属性 data(){ return { num:0 } }, watch(){ num(newValue,oldValue){ console.log('newValue: '+newValue+' ,oldValue: '+oldValue); } } 2、watch 监听数组 data(){ obj:...
watch:{},与this.$watch();
weixin_30580943的博客
01-30 702
this.$watch this.$watch('value.series', (n, o) => { this.init();}) watch watch:{ value(n, o) {// debugger } }, 转载于:https://www.cnblogs.com/boonook/p/10336872.html
watch命令用法举例
qq646748739的专栏
09-05 1879
watch是一个非常实用的命令，基本所有的Linux发行版都带有这个小工具，如同名字一样，watch可以帮你监测一个命令的运行结果，省得你一遍遍的手动运行。 在Linux下，watch是周期性的执行下个程序，并全屏显示执行结果。 你可以拿他来监测你想要的一切命令的结果变化，比如tail 1个log文件，ls监测某个文件的大小变化。 1.命令格式：watch[参数][命令] 2.命令功能：可以将...
$watch函数的使用
Hello World
09-02 1794
(1)$watch简介 在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。 AngularJS内部的watch实现了页面随model的及时更新。 $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。 (2)watch方法用法 $watch(watchFn,watchAction,deep
vue中watch的详细用法
微光的博客
03-12 411
https://www.imooc.com/article/70010
$watch使用示例
最新发布
11-23
在Angular中，$watch的例子通常涉及监听某个绑定到视图的变量的变化。这里有一个简单示例： ```typescript class MyComponent { private value = 'Hello'; constructor(private $scope: ng.IScope) { // 使用$watch监听value属性 this.$watch('value', (newVal, oldVal) => { console.log(`Value changed from "${oldVal}" to "${newVal}"`); if (newVal !== oldVal) { this.doSomethingElse(newVal); } }); } doSomethingElse(newValue: string) { // 当value改变时，执行doSomethingElse方法 // 你可以在这里处理新的值 } } ``` 在这个例子中，每当`value`的值发生变化，`console.log`就会打印出新旧值，并调用`doSomethingElse`方法。如果提供了新的值，那么这个方法会被调用，否则不会。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值