cheatsheets

Вычисляемые свойства

← Назад

---

<script setup>
  Vue.createApp({
    data() {
      return {
        name: 'Tom',
        age: 25
      }
    },
    computed: {
      enabled: function () {
        console.log("computed")
        if (this.age > 18) return "доступ разрешен"
        else return "доступ запрещен"
      }
    },
    methods: {
      checkAge: function () {
        console.log("checkAge")
        if (this.age > 18) return "доступ разрешен"
        else return "доступ запрещен"
      }
    }
  }).mount('#app')
</script>

<template>
  <div id="app">
    <input type="text" v-model="name"/>
    <input type="text" v-model="age"/>
    <p>Имя:  Возраст </p>
    <p></p>
    <p></p>
  </div>
</template>

Сеттеры и Геттеры

<script setup>
  Vue.createApp({
    data() {
      return {
        firstname: 'Tom',
        lastname: 'Smith'
      }
    },
    computed: {
      fullname: {
        get: function () {
          return this.firstname + ' ' + this.lastname
        },
        set: function (newValue) {
          const names = newValue.split(' ')
          this.firstname = names[0]
          this.lastname = names[names.length - 1]
        }
      }
    }
  }).mount('#app')
</script>

<template>
  <div id="app">
    <input type="text" v-model="firstname"/>
    <input type="text" v-model="lastname"/>
    <input type="text" v-model="fullname"/>
    <p>Имя: </p>
  </div>
</template>

---

← Назад