美文网首页vue
关于watch和computed的结合监听props

关于watch和computed的结合监听props

作者: 一只正在成长的程序猿 | 来源:发表于2019-07-25 19:09 被阅读1次

需求

如果你要根据props传过来的值,来执行函数,你就需要监听,props传过来的值的变化

<template>
     <div class="logo" ref="logo">
        <img :src="src" alt="">
        <p v-if="status==true">注册成为英皇宝代理</p>
    </div>
</template> 
<script>
export default {
  props: ["status"],
  data() {
    return {
      src: require("@/assets/img/sign/logo.png")
    };
  },
   //计算传过来的属性
  computed: {
    isShow() {
      return this.status;
    }
  },
  watch: {
    isShow: {
      //深度监听,可监听到对象、数组的变化
      handler(newV, oldV) {
        // do something, 可使用this
        console.log(newV, oldV);
          //根据属性变化改变样式
        if (newV == true) {
          this.$refs.logo.classList.add("agency");
        }
      },
      deep: true
    }
  },
  mounted() {
  
  }
};
</script>

相关文章

  • vue-api-数据

    computed 计算属性 props watch 监听

  • 关于watch和computed的结合监听props

    需求 如果你要根据props传过来的值,来执行函数,你就需要监听,props传过来的值的变化

  • Vue

    watch 和 computed 和 methods 区别 watch:监听,对data的数据监听回调, 当依赖的...

  • vue中watch和computed的区别?

    watch顾名思义,用于监听数据变化,其中可以监听的数据来源有三部分:props、data、computed内的数...

  • vue 同时监听多个值的变化

    使用computed 和watch来同时监听多个属性值。。 参考原文:vue 使用watch同时监听多个属性[ht...

  • 2021-06-16 问题总结(一)

    1、Vue中的computed和watch的实际应用 ① 关于watchwatch就是监听某个值的变化,在值发生变...

  • 小结

    vue事件执行顺序Props => Methods => Data => Computed => Watch me...

  • vue框架的主要内容

    生命周期事件 data method computed watch props emit事件

  • 我读vue响应式

    vue生命周期:init:初始化props,methods,data,computed和watch; 1.this...

  • Vue面试学习及总结

    computed和watch computed是计算属性,也就是依赖某个值或者props通过计算得来得数据; co...

网友评论

    本文标题:关于watch和computed的结合监听props

    本文链接:https://www.haomeiwen.com/subject/ahskrctx.html