ატრიბუტებთან მუშაობა Vue ფრეიმვორკში

data-დან თვისებების მნიშვნელობების ჩასმა შესაძლებელია არა მხოლოდ ტექსტში, არამედ თეგების ატრიბუტებშიც. ეს კეთდება v-bind დირექტივის საშუალებით.

მოდით ამ დირექტივის გამოყენებით დავაყენოთ src ატრიბუტის მნიშვნელობა img თეგისთვის. დაე, სასურველი მნიშვნელობა ინახებოდეს თვისებაში:

data() {
	return {
		attr: 'img.png',
	}
}

ჩავწეროთ მნიშვნელობა თვისებიდან src ატრიბუტში:

<template>
	<img v-bind:src="attr">
</template>

ჩვეულებრივ ყველა იყენებს შემოკლებულ ვარიანტს v-bind-ის. ის წარმოადგენს უბრალოდ ორწერტილს ატრიბუტის სახელის წინ:

<template>
	<img :src="attr">
</template>

დაე, data-ში ინახებოდეს ტექსტი და ბმულის მისამართი:

data() {
	return {
		text: 'page',
		href: 'page.html',
	}
}

შექმენით ამ მონაცემების გამოყენებით შემდეგი კოდი:

<a href="page.html">page</a>