refs与ref

最新推荐文章于 2025-09-15 14:37:38 发布

原创最新推荐文章于 2025-09-15 14:37:38 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ref

Vue 专栏收录该内容

9 篇文章

订阅专栏

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

<!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>