vue--监视器（watch）

最新推荐文章于 2024-04-16 00:26:17 发布

execcmd

最新推荐文章于 2024-04-16 00:26:17 发布

阅读量1.4k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_44784469/article/details/110878389

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue内容—监视器

监听分为深度监听和浅监听

所需要的代码：

 <script>
      new Vue({
        el: "#app",
        data() {
          return {
            msg: "66666",
            stus: [{ name: "jack" }],
          };
        },
 </script>

浅监听：

1.在这里先说明浅监听，通过input的文本输入同步显示到h2中。

<div id="app">
          <input type="text" v-model='msg'>
          <h2>{{msg}}</h2>
      </div>

vue的代码：

  //  这个函数输入的数值在input上通过v-model同步展示
  watch:{
       msg: function (newV, oldV) {  //这个函数一个是输入的新值，一个是原来的值
            console.log(newV, oldV);//将这两个数值进行打印
            if (newV === "999") {//如果这个新的数值为999就进行打印
              console.log("999来了");
            }
          },
    }

2.深度监听：深度监听是今天刚看的bilibili视频上的，他当时用这个深度监听是因为，我们用了这个stus数组元素，它监听的对象在进行浅监听的时候可以直接找到那一块内存，但是在进行对数组对象监听的时候，他不能直接找到你想要让他所找的那一块内存，所以就用那个深度监听，deep属性设置为true，hander这一块还没弄明白是什么作用

<div id="app">
          <button @click='stus[0].name="rose"'>改变</button>
          <h4>{{stus[0].name}}</h4>
      </div>

//前文所用到的stus数组
  stus: {
            deep: true, //深度监视
            handler: function (newV, oldV) {
                console.log(newV[0].name);
            },
          },

这里是完整代码。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <div id="app">
          <input type="text" v-model='msg'>
          <h2>{{msg}}</h2>
          <button @click='stus[0].name="rose"'>改变</button>
          <h4>{{stus[0].name}}</h4>
      </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            msg: "66666",
            stus: [{ name: "jack" }],
          };
        },
        watch: {
          msg: function (newV, oldV) {
            console.log(newV, oldV);
            if (newV === "999") {
              console.log("999来了");
            }
          },
          stus: {
            deep: true, //深度监视
            handler: function (newV, oldV) {
                console.log(newV[0].name);
            },
          },
        },
      });
    </script>
  </body>
</html>

execcmd

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue--监视器（watch）

vue内容—监视器监听分为深度监听和浅监听所需要的代码： <script> new Vue({ el: "#app", data() { return { msg: "66666", stus: [{ name: "jack" }], }; }, </script>浅监听：1.在这里先说明浅监听，通过input的文本输入同步
复制链接

扫一扫