vue中dom元素和组件的获取

Vue中获取DOM元素

    <div id="app"><input type="button" value="获取元素" @click="getElement"><h3 ref="myh3">今天天气真好啊</h3></div><script>var vm = new Vue({el:'#app',data: {},methods: {getElement(){console.log(this.$refs.myh3.innerText)}    },})</script>

还可以直接获取组件中的数据和方法，直接调用

    <div id="app"><input type="button" value="获取元素" @click="getElement" ref="button"><h3 ref="myh3">今天天气真好啊</h3><hr><login ref="mylogin"></login></div><script>var login={template:'<h1>登录组件</h1>',data(){return {msg: 'son msg'}},methods: {show(){console.log("调用了子组件中的方法")}},}var vm = new Vue({el:'#app',data: {},methods: {getElement(){// console.log(this.$refs.myh3.innerText)// console.log(this.$refs.button.innerText)
                    alert(this.$refs.mylogin.msg)this.$refs.mylogin.show()}    },components:{login}})</script>

转载于:https://www.cnblogs.com/feixiangdecainiao/p/10846081.html

vue中dom元素和组件的获取相关推荐

js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装安装第一步:在官网下载QJ_FileCenter安装包第二部:访问FileCente ...
dom元素属性操作---属性获取或属性设置
目录一.属性的获取二.设置类属性设置类属性三.dom元素的class操作 1. 类添加的方法 2. 返回元素的class列表 3. 检测元素是否具有某个类 4. 输出类总共有几个 5. 移除类 ...
vue中，右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果右键菜单之禁用和子菜单 2.流程第一步:安包 npm install v-contextmenu --save-dev npm in ...
pythonxml解析拿到控件坐标_Python解析xml中dom元素的方法
本文实例讲述了Python解析xml中dom元素的方法.共享给大家供大家参考.详细实现方法如下: 复制代码代码如下: from xml.dom import minidom try: xmlfile ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...

vue中dom元素和组件的获取

vue中dom元素和组件的获取相关推荐

最新文章

热门文章