Oleg Alexandrov

Привязка данных

← Назад

---

Интерполяция

<script setup>
    Vue.createApp({
        data() {
            return {name: 'Tom', age: 36}
        },
        methods: {
            sayHi() {
                return `Привет, меня зовут ${this.name}`
            },
            welcome(hour) {
                if (hour > 21) return 'Доброй ночи.'
                else if (hour > 16) return 'Добрый вечер!'
                else if (hour > 11) return 'Добрый день'
                else return 'Доброе утро'
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <p> - </p>
        <p></p>
        <p></p>
        <p>12 часов: </p>
        <p>22 часа: </p>
    </div>
</template>

v-text

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {name: 'Tom', age: 36}
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <div v-text="name"></div>
        <div v-text="age"></div>
    </div>
</template>

v-bind

<script setup>
    Vue.createApp({
        data() {
            return {
                text: 'Google',
                title: 'google.com',
                link: 'https://google.com'
            }
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <a v-bind:href="link" v-bind:title="title"></a>
        <!-- или -->
        <a :href="link" :title="title"></a>
    </div>
</template>

v-once

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {message: 'Hello'}
        }
    }).mount('#app')

    vueApp.message = 'Goodbye'
    console.log(vueApp.message) // Goodbye
</script>

<template>
    <div id="app">
        <p v-once></p>  <!-- Hello -->
    </div>
</template>

v-html

<script setup>
    const vueApp = Vue.createApp({
        data() {
            return {message: '<h2>Hello</h2>'}
        }
    }).mount('#app')
</script>

<template>
    <div id="app">
        <div v-html="message"></div>
        <div></div>
    </div>
</template>

---

← Назад

This site is open source. Improve this page.