vue中$ref的基本用法
1、使用在一般的标签上
<div id="app">
<input ref="count" type="text" v-model="active.name" required name="name" value="">
</div>
这样在vue中我们可以使用$ref来获取dom节点,进行一些dom的操作
下面示例:控制input输入框的文字个数
new Vue({
el:'#app',
data:{
active:{'name':''}
},
watch:{
active:{
handler:function(){
var _this = this;
var _sum = 4; //字数限制为4个
_this.$refs.count.setAttribute("maxlength",_sum);
},
deep:true
}
},
})
2、使用在子组件上,可以用来获取子组件的属性值,假设子组件里面都有一个属性news
<div id="app">
<hdnews ref="hdnews"></hdnews>
<hdinfo ref="hdinfo"></hdinfo>
</div>
new Vue({
el:'#app',
mounted:function () {
console.log(this.$refs.hdnews.news);
console.log(this.$refs.hdinfo.news);
}
})
vue中$ref的基本用法的更多相关文章
- Vue.js-11:第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- c# out ref parames的用法
out ref parames的用法(将值传递转换成引用传递) Out 一般用于返回多个值,在方法体中会清空out变量,侧重于一个方法有多个返回值得时候使用 Ref有进有出,可以在方法体外必须赋初值, ...
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- Vue使用Ref跨层级获取组件实例
目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...
- vue里ref ($refs)用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
随机推荐
- Javascript Property Names
[Javascript Property Names] Property names must be strings. This means that non-string objects canno ...
- usb-blaster安装
插入usb-blaster后,无法安装驱动,一直显示感叹号,更新驱动后显示“文件的哈希值不在指定的目录”这样的错误提示,解决方法如下:1.Windows键+ R,输入shutdown.exe /r / ...
- Oracle 存储过程例子返回记录集
转载:https://www.cnblogs.com/mikalshao/articles/1454134.html Oracle 不支持批量查询,因此无法从一个命令返回多个结果集.使用存储过程时,返 ...
- 齐博CMS:最常用的一些变量名,方便二次开发.必须要熟悉的
ROOT_PATH程序所在硬盘目录的绝对地址,等同于以前的PHP168_PATH$webdb网站的全局变量,模块的全局变量也是这个$onlineip当前用户的IP$timestamp当前时间$WEBU ...
- ucore-lab1-练习2report
练习二实验报告 1.从CPU加电后执行的第一条指令开始,单步跟踪BIOS: 1.1默认的gdb需要进行一些额外的配置才能进行qemu的调试任务,qemu和gdb之间使用网络端口1234进行通信. la ...
- 第三章 列表(c)有序列表
- 安装python3 及virtual与virtualenvwrapper
安装python3 下载python源码包 网址:https://www.python.org/downloads/release/python-362/ 下载地址:https://www.pytho ...
- 三个<li>元素放一行
<ul><li style="float:left;display:inline;">0</li><li style="floa ...
- 在linux 中启动anaconda
anaconda-navigator $ source ~/anaconda3/bin/activate root ###在bin 目录下打开终端 敲 ./activate root $ a ...
- 安装sql server 2008 提示错误 SQL Server 2005 Express 工具。 失败
安装sql server 2008 management,提示错误:Sql2005SsmsExpressFacet 检查是否安装了 SQL Server 2005 Express 工具. 失败,已安装 ...