姓名的拼接

<!DOCTYPE html>

<body>
<div id="app">
<p>First name: <input type="text" v-model="firstname">{
    
    {
    
     firstname }}</p>
<p>Last name: <input type="text" v-model="lastname">{
    
    {
    
     lastname }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       firstName: 'Smith',
       lastName: 'Will'
     }
   },
   computed: {
    
    
     joinedName() {
    
    
       return firstName + lastName
     }
     }
   
 })
  
 app.mount('#app')

  </script>
</body>
</html>

也不是完全一无是处啊

<!DOCTYPE html>

<body>
<div id="app">
<p>First name: <input type="text" v-model="firstName"></p>
<p>Last name: <input type="text" v-model="lastName"></p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       firstName: 'Smith',
       lastName: 'Will'
     }
   },
   computed: {
    
    
     joinedName() {
    
    
       return firstName + lastName
     }
     }
   
 })
  
 app.mount('#app')

  </script>
</body>
</html>

为什么get了还要set？

<!DOCTYPE html>

<body>
<div id="app">
<p>First name: <input type="text" v-model="firstName"></p>
<p>Last name: <input type="text" v-model="lastName"></p>
<p>{
    
    {
    
     fullName }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       firstName: 'Smith',
       lastName: 'Will'
     }
   },
   computed: {
    
    
     fullName: {
    
    
       get() {
    
    
         return this.firstName + ' ' + this.lastName
       },
       set(newValue) {
    
    
         let names = newValue.split(' ')
         this.firstName = names[0]
         this.lastName = names[names.length - 1]
       }
     }
     }
 })
  
 app.mount('#app')

  </script>
</body>
</html>

试过，get，答案就出来了啊，就正确了啊？
后面这个是在干什么

this不会用，不知道要什么情况下必须用this

猜你喜欢