vue-watch侦听器

一、watch侦听器

作用:当有数据随着其他数据变动而变动时,可以使用侦听属性

二、代码演示

1、不使用侦听器

  1. 代码

    <!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">
          <!-- 两个输入值都实现了双向绑定 -->
          <label>姓:<input type="text" v-model="firstname" /></label>
          <label>名:<input type="text" v-model="secondname" /></label>
          <hr />
          <h2>姓:{{firstname}}</h2>
          <h2>名:{{secondname}}</h2>
          <h2>全名:{{fullname}}</h2>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            firstname: "",
            secondname: "",
            fullname: "",
          },
          methods: {},
        });
      </script>
    
  1. 测试结果

    vue-watch侦听器_第1张图片

    此时,fullname不跟着 姓 或者 名 输入的变化而变化,这显然不符合逻辑。

2、使用 watch 优化

  1. 修改代码

    <!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">
          <!-- 两个输入值都实现了双向绑定 -->
          <label>姓:<input type="text" v-model="firstname" /></label>
          <label>名:<input type="text" v-model="secondname" /></label>
          <hr />
          <h2>姓:{{firstname}}</h2>
          <h2>名:{{secondname}}</h2>
          <h2>全名:{{fullname}}</h2>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            firstname: "",
            secondname: "",
            fullname: "",
          },
          methods: {},
          //监听
          watch: {
            //参数说明:1、新值,2、旧值
            firstname(newValue, oldValue) {
              this.fullname = newValue + " " + this.secondname;
            },
            secondname(newValue, oldValue) {
              this.fullname = this.firstname + " " + newValue;
            },
          },
        });
      </script>
    </html>
    
    
  2. 测试结果
    vue-watch侦听器_第2张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)