【Vue基础】监听属性watch_一颗小梨子吖的博客-程序员秘密

Vue监听属性是 watch，我们可以通过 watch 来响应数据的变化。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch监听</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备容器--> 
<div id="root">
    <h2>今天也是{
   {mood}}的一天！！！</h2>
    <button @click="changeMood">改变心情</button>
</div>
</body>
<script type="text/javascript">
   Vue.config.productionTip = false //阻止vue生成生产提示。

   //创建实例
  var vm = new Vue({
       el:'#root',
       data:{
           isHappy:true,
       },
       computed:{
           mood(){
               return this.isHappy? '超级开心':'很难过'
           },
        
       },
       methods:{
               changeMood(){
                   this.isHappy = !this.isHappy
               }
           },
        watch:{
            isHappy:{//对isHappy属性进行监听
              handler(newValue,oldValue) {//当isHappy属性发生变化时调用
               console.log('isHappy发生了改变',newValue,oldValue)
              }
           },
           mood:{//watch也可以对计算属性进行监听,对mood属性进行监听
              handler(newValue,oldValue) {
                  console.log('mood发生了改变',newValue,oldValue)
              }
            }
        }
     
   })
</script>
</html>

！ watch可以对原有属性进行监听，也可以对计算属性进行监听。当所监听的属性发生变化时，回调函数被调用，回调函数有变化后的值和变化前的值两个参数。

运行结果：

监视有两种写法：可以通过.new Vue时传入watch配置（如上）；可以通过vm.$watch（如下），效果一样。

 // $watch 是一个实例方法
   vm.$watch('isHappy', function (newValue, oldValue) {
    console.log('isHappy发生了改变',newValue,oldValue)
   }, {
       deep: true,//开启深度监视
       immediate: true,//初始化时立即调用一次回调函数
   });

deep和immediate不需要时可以不配置。

本文链接：https://blog.csdn.net/weixin_45662637/article/details/121016465

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

extends in typescript_呀呀夫斯基的博客-程序员秘密

extends in typescript

[家里蹲大学数学杂志]第043期《泛函分析》试题_weixin_30299539的博客-程序员秘密

1 ( 20 分 ) 叙述算子序列一致收敛、强收敛、弱收敛的定义, 举例说明强收敛而不一致收敛.2 ( 20 分 ) 设 $\calX=C[a,b]$, 线性算子 $A$ 定义为 \[ (Ax)(t)=\int_a^tx(\tau)\rd\tau,\quad x\in C[a,b]. \] 证明 $A$ 是广义的幂零算子, 即 \[ \lim_{n\to\infty}\sqrt[n]{\...

openerp 报表_luccs的博客-程序员秘密

来源 http://www.cnblogs.com/alangwansui/archive/2013/02/05/2892839.htmlOpenERP 主要有三种类型的报表:OpenOffice.org 报表XML 报表自定义报表 (基于 PostgreSQL 视图，显示在界面上)这一部分主要描述 OpenOffice.org 报表, 和 XSL:

scan算法_scan算法用指到0吗_水落的博客-程序员秘密

#include#includeusing namespace std;#define MAXN 10000int main(){ int track[MAXN],n,s,k; cout cin>>n; cout for(int i=0;i>track[i]; for(int i=0;i for(in

指针详解2：二级指针与指针数组_二级指针指向指针数组_芝士工具猿的博客-程序员秘密

二级指针，顾名思义，是个二次的指针，也就是指向指针的指针基本类型如下：int** p;我们来看一段代码：void d_pointer(){ int a = 10; int* pa = &a;//pa是一个指针变量，变量有地址，所以有&pa int** ppa = &pa; //ppa就是一个二级指针第二颗星是说这是一个指针，第一个是说指针的对象是一个指针 //int*** pppa = &ppa 三级指针 printf("\n"); print

Keras可视化工具_z小白的博客-程序员秘密

Keras可通过TensorBoard来可视化训练过程，以回调函数的形式提供TensorBoard的功能。TensorBoard是TensorFlow提供的可视化工具，该回调函数将日志信息写入TensorBorad，使得你可以动态的观察训练和测试指标的图像以及不同层的激活值直方图。keras.callbacks.TensorBoard(log_dir='./logs', histogra...