首页 > 其他分享 >vue 监听器watch用法

vue 监听器watch用法

时间:2024-02-15 10:11:23浏览次数:30  
标签:vue 监听器 watch oldValue message newValue

<template>   <div>     <h1>{{ message }}</h1>     <button @click="btnclick">点击</button>   </div> </template>
<script>   export default{     data(){       return{         message:'hello'       }     },     methods:{       btnclick(){         this.message="word"       }     },     watch:{        message(newValue,oldValue){           console.log(newValue+'###########'+oldValue)        }     }   } </script>   注意   watch  中 message()函数必须和变量保持一致

标签:vue,监听器,watch,oldValue,message,newValue
From: https://www.cnblogs.com/96net/p/18015989

相关文章

  • vue 具名插槽slot 用法
    vue具名插槽slot为插槽取名字app.vue<template> <h1>插槽知识</h1> <SmallSlot> <template#header>  <div>  <ul>   <li>1</li>   <li>2</li>   <li>3</li>  </ul> ......
  • vue 插槽slot 用法
    vue插槽slot父组件为子组件传递html结构app.vue<template> <h1>插槽知识</h1> <SmallSlot> <div>  <ul>   <li>1</li>   <li>2</li>   <li>3</li>  </ul> </div> </Sma......
  • vue $emit事件用法
    App.vue<template> <ConpentA @paEvent="clickData"/> {{mes}}</template><script>importConpentAfrom'./components/ConpentA.vue';exportdefault{ data(){  return{   mes:''  } },......
  • vue 父传子 props 静态属性和动态属性
    Props静态属性<template> <div>   <ConpentA title="我是静态props"/> </div></template><script> importConpentAfrom'./components/ConpentA.vue' exportdefault{  components:{   ConpentA......
  • vue 状态管理vuex action 用法
    index.jsimport{createStore}from"vuex";conststore=createStore({  state:{    count:100  },  getters:{    compower(state){      return(id)=>state.count*id    }  },  mutations:{   ......
  • vue 状态管理vuex Mutation 加传递参数用法
    index.js写法import{createStore}from"vuex";conststore=createStore({  state:{    count:100  },  getters:{    compower(state){      return(id)=>state.count*id    }  },  mutations:{  ......
  • vuex
           ......
  • Vue3杂碎知识记录
    vue引入bootstrap当卸载App.vue里不行的时候就还可以写在main.js里导入bootstrap的时候写在main.js里,(还要添加依赖@popperjs/core)import'bootstrap/dist/css/bootstrap.css';import'bootstrap/dist/js/bootstrap';//注意js文件也要引入进来写在vue的script里面不行,要......
  • Vue3学习(16) - 左侧显示分类菜单
    写在前面和大家不太一样,我觉得今年的自己更加relax,没有亲戚要走,没有朋友相聚,也没有很好的哥们要去叙旧,更没有无知的相亲,甚至可以这么说没有那些闲得慌的邻居。也可以说是从今天开始,算是可以进入自己的小世界,做自己想做的事,看看书,学习一下。生活的精髓在于善待自己,用心感受每一......
  • Vite+Vue根据环境配置Websocket地址
    前言上回说到,利用vite加载不同mode下的配置文件,可以实现不同运行环境下的参数配置。在前端应用中经常使用到Websocket,其地址同样可以在.env中间中配置。代码vite.config.ts代码的执行是在createApp之前,不可以在vite.config.ts中使用例如pinia、router等组件。可以使用import.me......