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>

Logo

前往低代码交流专区

更多推荐