<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id="app">

            <p ref="good">不要啦</p>

            <button @click="add()">添加</button>

        </div>

    </body>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        var app = new Vue({

          el: '#app',

          data: {

            message: 'Hello Vue!'

          },

          methods:{

              add:function () {

                  console.log(this.$refs.good,)

                  this.$refs.good.style.color="red"

              }

          },

          created:function(){

              // this.getGood()

          }

        })

    </script>

</html>

要注意的是：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

一个方法，直接在created里面调,是不可以的,出现的是undefined.

vue的ref试用的更多相关文章

  1. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. Vue使用Ref跨层级获取组件实例

    目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  5. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  6. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  7. Vue使用ref 属性来获取DOM

    注意,在父组件中可以使用this.$refs.属性名  获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...

  8. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  9. vue之ref

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...

随机推荐

  1. SpringMVC、SpringFox和Swagger整合项目实例

    目标 在做项目的时候,有时候需要提供其它平台(如业务平台)相关的HTTP接口,业务平台则通过开放的HTTP接口获取相关的内容,并完成自身业务~ 提供对外开放HTTP API接口,比较常用的是采用Spr ...

  2. 如何获取jar包中resource下的文件

    maven工程打jar包,部署到服务器上以后,获取resource下文件的绝对路径是找不到该文件的 只能用流的方式获取,代码如下: import lombok.extern.slf4j.Slf4j; ...

  3. 中兴软开C++面经（一站式西安）- 2019秋招

    大概是9.6发短信邀请面试,但是6号有三个面试+一个在线笔试,就打算先去平安产险,看中途能不能再面个云从,中兴后面再面.然而,平安等了差不多4个小时才面完,期间云从面试官打来电话,只能说抱歉.中兴本来 ...

  4. python中 "is"和"=="的区别

    python中"is"和"=="区别 在做leetcode的时候,在判断两个数据是否相等时使用了python中的is not,想着入乡随俗,既然入了python ...

  5. Docker容器化技术（上）

    目录 Docker容器化技术 一.介绍 二.Docker的发展 三.Docker安装 四.阿里云Docker镜像加速 五.Docker的基本概念 六.命令 七.Docker宿主机与容器通信 八.容器内 ...

  6. python高级特性-列表生成

    概述 [x *x for x in range(1,11)][k+'='+v for k,v in d.items()] [s.lower() for s in L] 详解 1.单层迭代 >&g ...

  7. 如何利用AI识别未知——加入未知类（不太靠谱），检测待识别数据和已知样本数据的匹配程度（例如使用CNN降维，再用knn类似距离来实现），将问题转化为特征搜索问题而非决策问题，使用HTM算法（记忆+模式匹配预测就是智能），GAN异常检测，RBF

    https://www.researchgate.net/post/How_to_determine_unknown_class_using_neural_network 里面有讨论,说是用rbf神经 ...

  8. 51nod 2486 小b和矩阵

    小b有一个m行n列的矩阵. 她会从(1,1)开始,顺时针螺旋访问该矩阵,每个元素恰好被访问一次. 请你按小b的访问顺序输出每个元素. 收起   输入 第一行输入两个数m和n,其中0<m,n≤50 ...

  9. c++中结构体的使用

    文章链接: 结构体定义: struct Books { ]; ]; ]; int book_id; } book; 访问结构体成员: #include <iostream> #includ ...

  10. 《Exceptioning团队》第四次作业：项目需求调研与分析

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.探索团队软件项目需求获取技巧与方法2.学会 ...