Vue-12、Vue监视属性

这篇具有很好参考价值的文章主要介绍了Vue-12、Vue监视属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、介绍
Vue中的监视属性是通过watch选项来实现的。watch选项可以是一个对象,其中的每个属性都是要监视的属性名,而每个属性的值都是一个回调函数,用于处理这个属性的变化。

例如,假设有一个Vue实例的data对象中有一个属性message,我们想要监视这个属性的变化,可以通过watch选项来实现:

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('message的值已经改变了:', newValue, oldValue);
    }
  }
})

在上面的例子中,当message属性的值发生变化时,watch选项中定义的回调函数会被触发,并且会接收到新的值和旧的值作为参数。然后,我们可以在回调函数中执行任意的操作,比如打印变化的值。

除了对象方式的watch选项外,Vue还提供了一种更简便的方式,即使用计算属性。使用计算属性可以更方便地监视属性的变化,并且可以利用Vue的响应式系统自动更新计算属性的值。
例如,我们可以通过计算属性来监视message属性的变化:

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    messageWatcher: {
      get: function() {
        return this.message;
      },
      set: function(newValue) {
        console.log('message的值已经改变了:', newValue, this.message);
        this.message = newValue;
      }
    }
  }
})

在上面的例子中,我们定义了一个计算属性messageWatcher,它的get方法返回message属性的值,而set方法用于监视message属性的变化,并在变化时执行回调函数。通过这种方式,我们可以更方便地监视属性的变化,并且可以在回调函数中对属性的变化做出响应。

2、案例天气案例

效果
Vue-12、Vue监视属性,vue,vue.js,javascript,ecmascript

comuted 使用计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeweather">切换天气</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            ishot:true
        },
        computed:{
            info(){
                return this.ishot ? '炎热':'寒冷';
            }
        },
        methods:{
            changeweather(){
                this.ishot = !this.ishot;
            }
        }
    })
</script>
</body>
</html>

3、使用watch 监视属性第一种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性实现天气案例</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeweather">切换天气</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            ishot:true
        },
        computed:{
            info(){
                return this.ishot ? '炎热':'寒冷';
            }
        },
        methods:{
            changeweather(){
                this.ishot = !this.ishot;
            }
        },
        watch:{
            ishot: {
                immediate:true,//初始化时让handler调用一下
                //hander 什么时候被调用?当ishot发生修改时。
                handler(newvalue,oldvalue){
                    console.log(newvalue,oldvalue);
                }
            }
        }
    })
</script>
</body>
</html>

Vue-12、Vue监视属性,vue,vue.js,javascript,ecmascript
使用watch 第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性实现天气案例</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeweather">切换天气</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    const vm = new Vue({
        el:"#root",
        data:{
            ishot:true
        },
        computed:{
            info(){
                return this.ishot ? '炎热':'寒冷';
            }
        },
        methods:{
            changeweather(){
                this.ishot = !this.ishot;
            }
        },
        // watch:{
        //     ishot: {
        //         immediate:true,//初始化时让handler调用一下
        //         //hander 什么时候被调用?当ishot发生修改时。
        //         handler(newvalue,oldvalue){
        //             console.log(newvalue,oldvalue);
        //         }
        //     }
        // }
    })
    vm.$watch('ishot',{
        immediate:true,//初始化时让handler调用一下
                //hander 什么时候被调用?当ishot发生修改时。
        handler(newvalue,oldvalue){
            console.log(newvalue,oldvalue);
        }
    })
</script>
</body>
</html>

Vue-12、Vue监视属性,vue,vue.js,javascript,ecmascript
总结:
Vue-12、Vue监视属性,vue,vue.js,javascript,ecmascript文章来源地址https://www.toymoban.com/news/detail-824238.html

到了这里,关于Vue-12、Vue监视属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的computed计算属性和watch监视(四)

    监视【ref】定义的【基本数据】类型 监视【ref】定义的【对象类型】数据 监视【reactive】定义的【对象类型】数据  与 场景二 不同的是,newVal和oldVal是一样的,表明通过Object.assign重新赋值的时候,并不是生成一个新的对象,而是新的值覆盖了旧值 监视【ref】或者【reactiv

    2024年02月21日
    浏览(45)
  • Vue3监视属性watch详解(附带详细代码与讲解!!!)

    watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。 第一个参数是侦听器的 源 。这个来源可以是以下几种: 一个函数, 一个返回值 一个ref 一个响应式对象(reactive定义的) ...或是由以上类型的值组成的数组 第二个参数是一个回调函数, 这个回调函数可接收三个

    2024年02月11日
    浏览(38)
  • Vue3的props需要注意的地方(简写与监视属性)

    在工作中踩了props的坑,总结一下: 1.props是可以在模板语法中简写的。就好比,toRefs了一下state。我们没必要在模板语法中加上props.xxx; 2.有时我们需要监视props的内容,可以用到监视属性watch。我们可以先复习一下watch在Vue3的用法: 具体也可以见一下这篇博客:Vue3中watch的

    2024年02月07日
    浏览(39)
  • 【Vue3】setup的注意点及watch监视属性的六种情况

    1.1setup的执行时间 1.setup的执行时间要比beforCreate执行要早 1.2.steup参数 setup的参数 1.props: 值为对象,包含: 组件外部传递过来,且组件内部声明接收了的属性 2.context:上下文对象 ①attrs:值为对象,包含: 组件外部传递过来,但没有在props配置中声明的属性,相当于 this.$attrs ②sl

    2023年04月22日
    浏览(40)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(63)
  • Vue.js 中的 watch 属性详解

    在 Vue.js 中, watch 属性是一种非常重要的属性,它可以监听 Vue 实例中指定的数据变化,并在数据发生变化时执行相应的操作。本文将对 Vue.js 中的 watch 属性进行详细的介绍,并附上相关的代码示例。 在 Vue.js 中, watch 属性被定义为一个对象,它可以用来监听 Vue 实例中的数

    2024年02月07日
    浏览(45)
  • vue.js中如何给元素动态添加属性?

    由于已经在一个对象中有属性,可以直接将它传递给v-bind;如下例子

    2024年02月14日
    浏览(63)
  • Vue.js 中的过滤器和计算属性

    Vue.js 是一款流行的 JavaScript 框架,它提供了一种简单而灵活的方式来构建交互式 Web 应用程序。在 Vue.js 中,过滤器和计算属性是两个常用的概念。它们可以帮助开发者更方便地处理数据,提高代码的可读性和可维护性。但是这两个概念有什么区别呢?本文将会详细介绍 Vue

    2024年02月08日
    浏览(50)
  • Vue-12.集成postcss.config.js

    PostCSS 是一个用于处理样式的工具,可以通过插件来定制其行为。以下是一些常用的 PostCSS 插件和 API 的介绍: Autoprefixer : 这是一个流行的 PostCSS 插件,用于自动添加浏览器前缀,以确保您的样式在不同浏览器中具有一致的效果。在配置中使用 \\\"autoprefixer\\\": {} 来启用。 postcss

    2024年02月12日
    浏览(68)
  • Vue-13、Vue深度监视

    1、监视多级结构中某个属性的变化 2、监视多级结构中所有属性的变化。 3、监视简写 当只有handler 时简写如下: 4、监视属性姓名案例 5、计算属性与监视属性的区别

    2024年01月24日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包