Vue获取元素或组件内容$refs
Jquery中我们可以通过$('.className')或者$('#ID')来获取元素的值或者内容,而在Vue中我们可以通过this.$refs来获取标签元素的内容或值。$("#id").text('xxx')// 使用Jquerydocument.getElementById("id")// 使用原生Dom<template><p ref="textElement">11
·
Jquery中我们可以通过$('.className')或者$('#ID')来获取元素的值或者内容,而在Vue中我们可以通过this.$refs来获取标签元素的内容或值。
$("#id").text('xxx') // 使用Jquery
document.getElementById("id") // 使用原生Dom
<template>
<p ref="textElement">1111</p>
</template>
<script>
...
created(){
console.log(this.$refs.textElement.innerHTML)
}
...
</srcipt>
<div id="app">
<navbar></navbar>
<pagefooter></pagefooter>
</div>
<script>
Vue.component('navbar',{
template:'#navbar',
data:function () {
return {
navs:[]
}
}
});
Vue.component('pagefooter',{
template:'#pagefooter',
data:function () {
return {
footer:''
}
}
});
new Vue({
el:'#app',
mounted:function () {
console.log(this.$refs.navbar.navs);
console.log(this.$refs.pagefooter.footer);
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)