Vue 'ref' 属性
更新于 2024/2/25 11:50:00
❮ Vue 'key' 属性
Vue 内置属性参考
Vue 内置组件 ❯
示例
使用 ref 属性更改
标签内的文本:
Initial text.
const app = Vue.createApp({
methods: {
changeText(){
this.$refs.pEl.innerHTML = "Hello!";
}
}
})
app.mount('#app')
亲自试一试 »
请参阅下面的更多示例。
定义和用法
ref 属性用于标记 中的元素,以便可以从
#pEl {
background-color: lightgreen;
display: inline-block;
}
运行示例 »
示例 2
第一个
标签中的文本将复制到第二个
标签中。
示例
Click the button to copy this text into the paragraph below.
...
export default {
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
}
}
};
运行示例 »
示例 3
元素获取与输入字段中写入的内容相同的内容。
示例
开始在输入元素内写入,文本将通过使用"$refs"对象复制到最后一段。
export default {
methods: {
getRefs() {
this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
}
}
};
运行示例 »
示例 4
该按钮显示作为数组元素存储在 $refs 对象内的第三个列表元素。
示例
单击该按钮可显示作为数组元素存储在 $refs 对象中的第三个列表元素。
- {{ x }}
{{ thirdEl }}
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);
}
}
};
pre {
background-color: lightgreen;
display: inline-block;
}
运行示例 »
相关页面
Vue 教程:Vue 模板参考
Vue 教程:Vue v-for 指令
Vue 参考:Vue $refs 对象
❮ Vue 'key' 属性
Vue 内置属性参考
Vue 内置组件 ❯