Vue之引用DOM的ref属性

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册

这里写图片描述

实例:

这里写图片描述

这里写图片描述
这里为了在create的时候引用DOM元素,先在DOM中使用ref标签进行了注册,然后便可以通过’this.$refs’再跟注册时的名称来引用DOM元素了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue之$nextTick属性

因为Vue中DOM的更新是异步的,所以一般涉及到DOM的操作都会放在nextTick函数的回调中去执行 将回调延迟到下次 DOM 更新循环之后再执行。在修改数据之后立即使用它,然后等待 DOM 更新之后执行回调。它跟全局方法 Vue.nextTick 一样,不同的是回…

小程序input实现数据双向绑定

小程序input实现数据双向绑定最终效果index.wxmlindex.js最终效果 index.wxml <view class"uploader"><input type"number" style"border: 2rpx solid #666;" bindinputinputChange data-namepeopleNumber placeholder"输入人数&…

JS之字符串分割方法split

作用&#xff1a;JavaScript split() 方法用于把一个字符串分割成字符串数组 语法&#xff1a;stringObject.split(separator,howmany) 参数1&#xff1a;separator必选&#xff0c;字符串或正则表达式&#xff0c;从该参数指定的地方分割 stringObject 参数2&#xff1a;ho…

资深工程师为何否定这种单例模式

本人在 横刀天笑 的一篇谈论单例模式的文章http://www.cnblogs.com/yuyijq/archive/2007/10/07/915941.html里面有两种写单例的例子.有一种方法得到资深工程师的否定.事实证明他的想法是错误的。 第一种:publicclassSingleton2{ 3 private static Singleton _instance null…

CSS之window的视图属性

1. innerWidth 属性和innerHeight 属性 innerWidth获取浏览器窗口宽度&#xff0c;注意不带浏览器的边框宽度&#xff0c;但是包括下拉按钮的宽度 innerHeight获取浏览器窗口高度&#xff0c;从浏览器底部到工具栏的距离&#xff0c;注意不包括工具栏的高度 innerWidth和inner…

在SQL Server2005中进行错误捕捉

任何程序都可能出现错误&#xff0c;在SQL Server中执行Transact-SQL也不例外。如果在Transact-SQL中发生了错误&#xff0c;一般有两种捕捉错误的方法&#xff0c;一种是在客户端代码&#xff08;如 c#、delphi等)中使用类似try...catch的语句进行捕捉&#xff1b;另外一种就是…

CSS之Screen视图属性

1.availWidth和availHeight availWidth和availHeight返回的是显示器可用宽高&#xff0c;注意不包括开始菜单栏这种东东的高度和宽度 2.colorDepth 表示显示器的颜色深度 3.width和height 表示显示器屏幕的宽高&#xff0c;和availWidth和availHeight的区别是返回的宽高包含…

微信小程序几种常用弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a;wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…

CSS之文档视图(DocumentView)和元素视图(ElementView)方法

1.elementFromPoint() 返回给定坐标处的元素。是个在目前而言&#xff0c;兼容性不错的方法 将给定位置处(100,100)的元素的字体颜色设置为红色 2.getBoundingClientRect() 返回的是返回的是一个对象&#xff0c;包含 top, left, right, 和 bottom四个属性值&#xff0c;大小…

[Bash]kill指定的进程名

通过bash来kill指定的进程名&#xff0c;bash文件名为&#xff1a;/home/zcm/bin/d.sh&#xff0c;内容如下&#xff1a; #!/bin/shif [ "$1" "" ]; thenecho "Usage: sh $0 <processname>"exit 0fi#s1ps -ef|grep $1|grep -v grep|awk …

CSS之元素视图属性

1.clientLeft和clientTop 返回的是内容区域的左上角相对于整个元素左上角的位置&#xff08;包括边框&#xff09; 2.clientWidth和clientHeight 表示内容区域的高度和宽度&#xff0c;包括padding大小&#xff0c;但是不包括边框和滚动条 3.offsetLeft和offsetTop offsetLe…

Vue之Vue.set动态新增对象属性

当我们给一个比如props中&#xff0c;或者data中被观测的对象添加一个新的属性的时候&#xff0c;不能直接添加&#xff0c;必须使用Vue.set方法 Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的&#xff0c;那该方法可以确保属性被创建后也是响应式的&#x…