refs и управление html-элементами

Последнее обновление: 05.11.2020

С помощью параметра refs во Vue 3 позволяет напрямую работать с определенными html-элементами из шаблона, например, можно изменять их стили, текст и т.д. Так, определим следующую html-страницу:

<!DOCTYPE html>
<html>
<head>
<title>$refs в Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <h2 ref="header">Hello world!</h2>
    <button v-on:click="change">Change</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
	methods:{
        change(){
            this.$refs.header.innerText = "Welcome to Vue 3";
        }
	}
})
.mount('#app');
</script>
</body>
</html>

С помощью атрибута ref для html-элемента устанавливается ключ, через который потом можно ссылаться на этот элемент.

<h2 ref="header">Hello world!</h2>

В методах объекта Vue можно обратиться к элементу по установленному ключу через объект $refs:

this.$refs.header.innerText = "Welcome to Vue.js";

С объектом, который представляет html-элемент, (в данном случае this.$refs.header) фактически можно также работать, как и со стандартныи объектами JavaScript, которые представляют html-элементы. То есть мы можем обратиться к его свойствам innerText или innerHTML. Хотя в реальности объект this.$refs.header будет представлять надстройку над объектом js, который собственно и представляет html-элемент. Но фактически через this.$refs.header мы сможем уравлять элементом h2 на веб-странице.

Параметр $refs и управдение html-элементами во Vue 3

Подобным образом можно обращаться и к другим свойствам html-элемента и управлять ими.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850