zoukankan      html  css  js  c++  java
  • Vue中computed的set和get方法

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7   <title>Document</title>
     8   <!-- vue.js 引入 -->
     9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    10 </head>
    11 <body>
    12   <div id="app">
    13     first name: <input type="text" v-model="firstName">
    14     <br>
    15     second name: <input type="text" v-model="lastName">
    16     <br>
    17     full name: <div>{{fullName}}</div>
    18   </div>
    19 
    20   <script>
    21     var app = new Vue({
    22       el: '#app',
    23       data () {
    24         return {
    25           firstName: '',
    26           lastName: ''
    27         }
    28       },
    29       computed: {
    30         // 输入firstName和lastName自动拼成fullName
    31         // 方法:1
    32         /*fullName: function () {
    33           return this.firstName + ' ' + this.lastName
    34         }*/
    35         // 方法:2
    36         /*fullName: {
    37           get: function () {
    38             return this.firstName + ' ' + this.lastName
    39           }
    40         }*/
    41 
    42         // 输入fullName后自动拆分成两个name
    43         fullName: {
    44           get: function () {
    45             return this.firstName + ' ' + this.lastName
    46           },
    47           set: function (fullName) {
    48             var arr = fullName.split(' ');
    49             // 以空格来分,将一个字符串分割成了两个字符串
    50             this.firstName = arr[0]
    51             this.lastName = arr[1]
    52           }
    53         }
    54       }
    55     })
    56   </script>
    57 </body>
    58 </html>

    结果如图:

    Vue

  • 相关阅读:
    linux 装mysql的方法和步骤
    Linux查看系统发行版本
    Spinner
    时间与日期选择器
    Linux目录处理命令
    开发Activity
    js属性操作(2)
    Js的属性操作(1)
    学习java Script的热身作业
    在Windows下搭建Android开发环境
  • 原文地址:https://www.cnblogs.com/cq-0715/p/9795011.html
Copyright © 2011-2022 走看看