Đối tượng Vue $refs
Ví dụ
Sử dụng đối tượng $refs
bên trong một phương thức để thay đổi văn bản bên trong thẻ <p>
.
methods: {
changeVal() {
this.$refs.pEl.innerHTML = "Hello!";
}
}
Chạy ví dụ »Định nghĩa và cách sử dụng
Các phần tử DOM được đánh dấu bằng thuộc tính ref
tích hợp được lưu trữ trong đối tượng $refs
.
Các phần tử bên trong đối tượng $refs
có thể được truy cập bằng từ khóa this
.
Đối tượng $refs
được sử dụng để tiếp cận các phần tử DOM để đọc hoặc thao tác chúng theo cách tương tự như querySelector()
và getElementById()
được sử dụng trong JavaScript đơn giản.
Thêm ví dụ
ví dụ 1
Văn bản từ thẻ <p>
đầu tiên được sao chép sang thẻ <p>
thứ hai.
<template>
<h1>Example</h1>
<p ref="p1">Click the button to copy this text into the paragraph below.</p>
<button @click="transferText">Transfer text</button>
<p ref="p2">...</p>
</template>
<script>
export default {
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
}
}
};
</script>
Chạy ví dụ »Ví dụ 2
Phần tử <p>
có cùng nội dung với nội dung được viết trong trường đầu vào.
<template>
<h1>Example</h1>
<p>Start writing inside the input element, and the text will be copied into the last paragraph by the use of the '$refs' object.</p>
<input ref="inputEl" @input="getRefs" placeholder="Write something..">
<p ref="pEl"></p>
</template>
<script>
export default {
methods: {
getRefs() {
this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
}
}
};
</script>
Chạy ví dụ »Ví dụ 3
Nút này hiển thị phần tử danh sách thứ ba được lưu trữ dưới dạng phần tử mảng bên trong đối tượng $refs
.
<template>
<h1>Example</h1>
<p>Click the button to reveal the 3rd list element stored as an array element in the $refs object.</p>
<button @click="getValue">Get the 3rd list element</button><br>
<ul>
<li v-for="x in liTexts" ref="liEl">{{ x }}</li>
</ul>
<pre>{{ thirdEl }}</pre>
</template>
<script>
export default {
data() {
return {
thirdEl: ' ',
liTexts: ['Apple','Banana','Kiwi','Tomato','Lichi']
}
},
methods: {
getValue() {
this.thirdEl = this.$refs.liEl[2].innerHTML;
console.log("this.$refs.liEl = ",this.$refs.liEl);
}
}
};
</script>
<style>
pre {
background-color: lightgreen;
display: inline-block;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Tham khảo mẫu Vue
Tham chiếu Vue: Thuộc tính Vue 'ref'