refs与ref

SignalFire

于 2022-05-21 14:55:11 发布

阅读量257

点赞数

分类专栏： Vue 文章标签： vue.js ref

本文链接：https://blog.csdn.net/SignalFire/article/details/124267632

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这是一个关于Vue.js的简单示例，展示了如何使用数据绑定显示和更新`name`和`age`属性。当用户在输入框中输入时，`getName`和`getAge`方法会被调用，分别打印出输入的姓名和年龄。这个例子涵盖了Vue的基本数据响应性和DOM交互。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div id="app">
           <input @keyup="getName" ref="myName"/>{{name}}
           <input @keyup="getAge" ref="myAge"/>{{age}}
       </div>
   </body>
   <script src="https://unpkg.com/vue@next"></script>
   <script>
       const app = Vue.createApp({
           data(){
               return {
                   name:"asia",
                   age:23
               }
           },
           methods:{
               getName(){
                   console.log(this.$refs.myName.value);
               },
               getAge(){
                   console.log(this.$refs.myAge.value);
               },
           }
       }).mount("#app");
   </script>
</html>