vue 中watch和computed的区别

最新推荐文章于 2023-11-23 11:34:29 发布

huxiaoxiao.

最新推荐文章于 2023-11-23 11:34:29 发布

阅读量445

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121684195

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

computed 计算属性监听多个（数据）

<body>
    <div id="app">
      <p>
        <input type="text" name="" id="" v-model="num1" />
        +
        <input type="text" name="" id="" v-model="num2" />
        =
        <span>{{total}}</span>
      </p>
    </div>
    <script src="js/vue.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          num1: "",
          num2: "",
          sum: "",
        },
        computed: {
          // computed监听对象中多个数据的变化
          total() {
            this.sum = Number(this.num1) + Number(this.num2);
            return this.sum;
          },
        },
        methods: {},
      });
    </script>
  </body>

输入一个内容时，也完成了监听：

当我们在文本框中输入内容时，计算属性就已经完成了对两个数据的计算

watch 监听单个（数据）

注意：watch 监听的数据，一定是在 data 中是存在的！！

在data数据中心的num，当我们通过点击事件让它发生变化时，通过watch监听属性监听它的变化

<div id="app">
        <p>{{num}}</p>
        <button @click="num++">点击加一</button>
    </div>

      let vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            watch:{
            // 当前值（已经改变的值）newval  旧值 oldval
                num:function(newval,oldval){
                    console.log("新值是："+newval);
                    console.log("旧值是："+oldval);
                }
            }
        })

当我们点击按钮时，查看控制台：

huxiaoxiao.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 中watch和computed的区别

computed 计算属性监听多个（数据）<body> <div id="app"> <p> <input type="text" name="" id="" v-model="num1" /> + <input type="text" name="" id="" v-model="num2" /> = <span>{{total}
复制链接

扫一扫