vue monitor and calculate properties

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="bg">
        hello world!! </br>
        {{msg}}
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var app =  new Vue({
        el: '#app',
        data: {
            msg: "勇士西部总冠军",
            count: 0,
        },
      watch: {
            //监听函数值改变它所监听的值，其他的值它不会去做处理
          // todo 异步场景
            msg: function (newVal,oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            }

        },
      //计算属性，会在app的值改变的时候触发
      // todo 数据联动
      computed: {
            msg1: function () {
                return 'computed' + this.msg; //这里的值，指最后app里面的data的msg的值，指app这个实例的值

            }
      }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div class="bg">
hello world!! </br>
{{msg}}
</div>

</div>

<Script the src = "https://cdn.jsdelivr.net/npm/vue"> </ Script>
<Script>
var App = new new Vue ({
EL: '#app',
Data: {
MSG: "Total West Warrior champion ",
COUNT: 0,
},
Watch: {
// function values change the value of listeners listen for it, others do not value it handle
// todo asynchronous scenarios
msg: function (newVal, oldVal) {
console.log ( 'newVal', newVal);
the console.log ( 'oldVal', oldVal);
}

    },
  //计算属性，会在app的值改变的时候触发
  // todo 数据联动
  computed: {
        msg1: function () {
            return 'computed' + this.msg; //这里的值，指最后app里面的data的msg的值，指app这个实例的值

        }
  }
})

</script>
</body>
</html>

// value here, refers to the last value of the msg inside app data, referring to the value of this instance app
// value here, refers to the last value of the msg inside app data, referring to an example of the value app

vue monitor and calculate properties

Guess you like