vue的ref属性
ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上,如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例。
<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp istance --> <child-comp ref="child"></child-comp>
因为 ref 本身是作为渲染结果被创建的,只能初始化渲染完成后才能访问它们。
vue的ref属性 完成数据绑定
<div id="app"> <h1>{{ message }}</h1> <button ref="myButton" @click="clickedButton">点击偶</button> </div> let app = new Vue({ el: '#app', data () { return { message: 'Hi!大漠' } }, methods: { clickedButton: function () { console.log(this.$refs) this.$refs.myButton.innerText = this.message } } })
vue的ref属性获取/设置标签的样式
<div > <div ref="image" class="image"></div> <div ref="content" class="content"></div> </div> <style> .image{ width:100%; height:0; padding-top:70%; } .content{ position:absolute; width:100%; top:0; left:0; right:0; bottom:0; } </style> <script> export default{ mounted(){ setTimeout(()=>{ this.$refs.content.$el.style.top=`${this.$refs.image.clientHeight}px` },20) } } </script>
未完,待续......