vue 基礎入門筆記 19:計算屬性和偵聽屬性

September發表於2019-08-19
Vue筆記
  • 簡單介紹
    1. computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
    2. methods方法表示一個具體的操作，主要書寫業務邏輯；
    3. watch一個物件，鍵是需要觀察的表示式，值是對應回撥函式。主要用來監聽某些特定資料的變化，從而進行某些具體的業務邏輯操作
  • 應用場景
    1. watch擅長處理的場景：一個資料影響多個資料
    2. 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="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<input v-model="firstName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
<input v-model="lastName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
<input v-model="fullName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
<input v-model="full2Name" type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
</div>
<script>
var vm=new Vue({
   el:'#app',
   data:{
       firstName: "",
       lastName: '',
       full2Name:""
   },
   methods:{},
//    對於任何複雜邏輯，你都應當使用計算屬性
   computed: {
       fullName(){
           return this.firstName + this.lastName
       }
   },
   watch: {
       firstName(){
           this.full2Name = this.firstName + this.lastName
       },
       lastName(){
           this.full2Name = this.firstName + this.lastName
       }
   },
});
Vue.config.devtools = true
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章