毕设：week8-vue.js：ref

cs_rookie

于 2019-09-23 02:10:04 发布

阅读量94

点赞数

分类专栏：毕业设计毕设

本文链接：https://blog.csdn.net/qq_33516656/article/details/101181635

版权

毕设同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

毕业设计

10 篇文章 0 订阅

订阅专栏

一、实例

1、ref介绍

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

2、代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue小白</title>
        <link href="styles.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>ref的简单实例</h1>
<label>姓名</label>
<input type="text" ref="name" @keyup="getName"/>
<span>{{name}}</span>
<label>年龄</label>
<input type="text" ref="age" @keyup="getAge"/>
<span>{{age}}</span>
        </div>
    </body>

    <script src="app.js"></script>
</html>

app.js

new Vue({
    el: '#vue-app',
    data() {
        return{
            name:'',
            age:32
        };
    },
    methods: {
       getName(){
        this.name=this.$refs.name.value;
       },
       getAge(){
        this.age=this.$refs.age.value;
       }
   }
});

3、实例结果
在这里插入图片描述 try be best yourself!!!

cs_rookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
毕设：week8-vue.js：ref

一、实例1、ref介绍ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。2、代码index.html<!DOCTYPE html><html> <head> <meta charset...
复制链接

扫一扫