Vue中使用watch computed

時間 2019-11-09

標籤 vue 使用 watch computed 简体版

原文原文鏈接

watch：監聽屬性，來監聽dta中的數據變化或者route的變化html

computed：計算屬性，vue

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。