Vue basic introductory notes 19: calculation properties and listening properties

Time:2021-9-3

Vue basic introductory notes 19: calculation properties and listening properties

  • Brief introduction
    1. computedThe result of the attribute is cached and recalculated unless the dependent responsive attribute changes. It is mainly used as an attribute;
    2. methodsMethod represents a specific operation, mainly writing business logic;
    3. watchFor an object, the key is the expression to be observed, and the value is the corresponding callback function. It is mainly used to monitor the changes of some specific data, so as to carry out some specific business logic operations
  • Application scenario
    1. watchGood at handling scenarios:One data affects multiple data
    2. ComputedLong processing scenarios:One data is affected by multiple data
      <!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/[email protected]/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="">
      <input v-model="lastName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="">
      <input v-model="fullName" type="text" name="" id="input" class="form-control" value="" required="required" pattern="">
      <input v-model="full2Name" type="text" name="" id="input" class="form-control" value="" required="required" pattern="">
      </div>
      <script>
      var vm=new Vue({
         el:'#app',
         data:{
             firstName: "",
             lastName: '',
             full2Name:""
         },
         methods:{},
      //For any complex logic, you should use computational properties
         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>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer