Vue中使用watch computed

watch：监听属性，来监听dta中的数据变化或者route的变化
computed：计算属性，
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="vue-2.4.0.js"></script>

  <script src="vue-router-3.0.1.js"></script>

</head>

<body>

  <div class="app">

    <!-- 如果不使用watch 或者计算属性，我们也可以使用事件绑定机制来引用

     -->

    <input type="text" v-model="fristname">

    <input type="text" v-model="lastname">

    <input type="text" v-model="countname">

     <router-link to="/login">登录</router-link>

     <router-link to="/zhuce">注册</router-link>

    <router-view></router-view>

  </div>

  <script>  

    // 路由模板

     var login={

       template:"<h1>登录界面</h1>"

     }

     var zhuce={

       template:"<h1>zhuce界面</h1>"

     }

    // 路由实例

    var router= new VueRouter({

      routes:[

        {path:'/',redirect:'login'},

        {path:'/login',component:login},

        {path:'/zhuce',component:zhuce}

      ]

    })

    // vm实例

    var vm=new Vue({

      el:'.app',

      data:{

        fristname:'',

        lastname:''

      },

      methods: {

      },

      // 计算属性

      // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，

      // 直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

        // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

        // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

        // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

      computed: {

        countname:function(){

          // return  是必须的参数  必须有返回值

          return this.fristname+this.lastname;

        }

      },

      // watch 监听data中的属性。

      watch: {

        // 当fristname 发生改变的时候，就会触发这个watch属性

        // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

        fristname:function(){

          console.log("sdfsdfsf");

        },

        // 监听$route.path 属性，其中这个函数由两个参数  newval和oldval  一个是新的值，一个是旧的值

        '$route.path':function(newval,oldval){

          if(newval==="/login"){

            console.log("欢迎进入登录界面");

          }else if(newval==="/zhuce"){

            console.log("欢迎进入注册界面");

          } 

        }

      },

      router:router

    })

  </script>

</body>

</html>
巴特西

Vue中使用watch computed

最新文章

热门文章
