首页 > 其他分享 >vue属性之监听属性(watch)

vue属性之监听属性(watch)

时间:2023-04-12 10:55:57浏览次数:40  
标签:vue 定义 函数 watch 属性 监听 变量

目录

简介

当一个变量的值发生变化时,执行对应的函数

语法

# 在属性中添加watch属性,并以需要监听变量的名字进行定义函数
data:{show: 'abc'}
watch:{
show(){
   我是函数内容
}
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jQuery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="myText">
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            myText: ''
        },
        // 定义watch属性
        watch:{
            // 使用变量名称进行定义函数
            myText(){
                console.log('我是监听属性定义的函数,我被执行了')
            }
        }
    })
</script>
</html>
  • 如图可以看到,如果变量变化了,函数也会被执行
    image

标签:vue,定义,函数,watch,属性,监听,变量
From: https://www.cnblogs.com/smyz/p/17309054.html

相关文章

  • vue项目通过外部配置文件读取接口地址- 在webpack-index.html模板中使用环境变量
    概述:在index.html模板中判断当前环境,处于开发环境下时读取process环境变量、处于生产环境下时读取根目录配置文件(./config.js),两种环境下将配置统一挂载到window全局变量上(SET_CONFIG)config.jswindow.SITE_CONFIG={appTitle:'系统测试',version:'1.0.0',apiURL:''......
  • vue之组件
    目录简介全局组件语法示例局部组件语法示例组件间通信父子页面通信之父传子语法示例组件通信之子传父语法示例使用ref进行父子组件通信方法示例动态组件(component)普通方法实现使用组件component实现动态组件相关keep-alive组件之插槽(slot)匿名插槽具名插槽简介组件(component......
  • 利用hibernate分析数据库中的表,属性以及对应的类的类名,字段
    2010-08-1109:27hibernate获得数据库的表名列名及其数据@TestpublicvoidtestHIbernateConfig1(){SessionFactoryfactory=newAnnotationConfiguration().configure().buildSessionFactory();AbstractEntityPersisterclassMetadata=......
  • 1.Vue的基本原理
    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会......
  • Vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次......
  • 1.Vue的基本原理
    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用......
  • (一)初始vue
    data属性data属性是传入一个函数,并且该函数需要返回一个对象:在Vue2的时候,也可以传入一个对象在Vue3的时候,必须传入一个函数,否则报错data中返回的对象会被vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:所有我们在template或者app通过{{counter}},访问......
  • #yyds干货盘点 springboot和vue搭建前后端项目实现员工的增删改查
    前言我是歌谣今天继续带来前后端项目的开发上次已经开发了部门管理,今天继续开发员工管理后端第一步empcontroller代码packagecom.itheima.controller;importcom.itheima.pojo.Emp;importcom.itheima.pojo.PageBean;importcom.itheima.pojo.Result;importcom.itheima.s......
  • Vue动态创建组件实例并挂载到body
    方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops组件实例中的prop*/exportfunctioncreate(Component,props){constcomp=new(Vue.extend(Component))({propsData:props}).$mount()document.body.appendChild(......
  • 一个 OpenTiny,Vue2 Vue3 都支持!
    大家好,我是Kagol,OpenTiny 开源社区运营,TinyVue 跨端、跨框架组件库核心贡献者,专注于前端组件库建设和开源社区运营。今天给大家介绍如何同时在Vue2和Vue3项目中使用 TinyVue。TinyVue是一套跨端、跨框架的企业级UI组件库,支持Vue2和Vue3,支持PC端和移动端。......