VUE框架监听属性值的变化------VUE框架

ゝ一纸荒年。 2024-02-17 11:38 3阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             数字:<input type="text" v-model:value="value"/>
>         </div>
>         <script>
>             const vm = new Vue({
>                 data : {
>                     msg : "Hello",
>                     value : ""
>                 },
>                 computed : {
>                     hehe()
>                     {
>                         return "hehe" + this.value;
>                     }
>                 },
>                 watch : {
>                     //可以监视多个属性的
>                     // 监视什么属性,就把什么属性放在这即可
>                     value : {
>                         immediate : true,
>                         // 这里有一个固定写死的方法就叫handler
>                         // handler什么时候被调用
>                         handler(newValue,oldValue)
>                         {
>                             // 这个方法在被监视参数变化时自动调用
>                             // handler有两个参数,第一个是newValue,另外一个是oldValue
>                             // newValue是属性改变后的新数值,oldValue是改变前的老数值
>                             console.log("自带的老的" + oldValue);
>                             console.log("自带的新的" + newValue);
>                         }
>                     },
>                     // 可以监视一般属性也可以监视计算属性
>                     hehe : {
>                         handler(newValue,oldValue)
>                         {
>                             console.log("hh的老的" + oldValue);
>                             console.log("hh的新的" + newValue);
>                         }
>                     }
>                 }
>             });
>             vm.$mount("#app");
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 数字:<input type="text" v-model:value="value"/>
> 
> </div>
> 
> <script>
> 
> const vm = new Vue(\{
> 
> data : \{
> 
> msg : "Hello",
> 
> value : ""
> 
> \},
> 
> computed : \{
> 
> hehe()
> 
> \{
> 
> return "hehe" + this.value;
> 
> \}
> 
> \},
> 
> watch : \{
> 
> //可以监视多个属性的
> 
> // 监视什么属性,就把什么属性放在这即可
> 
> value : \{
> 
> immediate : true,
> 
> // 这里有一个固定写死的方法就叫handler
> 
> // handler什么时候被调用
> 
> handler(newValue,oldValue)
> 
> \{
> 
> // 这个方法在被监视参数变化时自动调用
> 
> // handler有两个参数,第一个是newValue,另外一个是oldValue
> 
> // newValue是属性改变后的新数值,oldValue是改变前的老数值
> 
> console.log("自带的老的" + oldValue);
> 
> console.log("自带的新的" + newValue);
> 
> \}
> 
> \},
> 
> // 可以监视一般属性也可以监视计算属性
> 
> hehe : \{
> 
> handler(newValue,oldValue)
> 
> \{
> 
> console.log("hh的老的" + oldValue);
> 
> console.log("hh的新的" + newValue);
> 
> \}
> 
> \}
> 
> \}
> 
> \});
> 
> vm.$mount("\#app");
> 
> </script>
> 
> </body>
> 
> </html>