Vue 计算属性和ref的使用方法

最新推荐文章于 2025-04-18 14:32:26 发布

原创最新推荐文章于 2025-04-18 14:32:26 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了Vue.js中的计算属性和ref的使用。计算属性用于在模板中创建依赖于其他数据的值，当依赖的数据变化时，计算属性会自动更新。而ref则用于直接操作DOM元素，如在组件挂载后聚焦输入框。通过示例代码，展示了如何使用计算属性和ref实现特定功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、计算属性

2、ref操作dom元素

1、计算属性

1、使用场景：数据b依赖数据a时，b改成计算属性

2、用法：b和data中数据用法一样，值：function(){return 复杂逻辑的结果}

3、特点：依赖了a，a变 -> b自动变化没有依赖a，第一次结果自动缓存

4、和methods的区别：methods调用一次执行一次，如果没依赖a，只执行一次

<div id="app" v-cloak>
        {{msg}}
        <hr/>
        {{str}}
        <hr>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
    </div>
    <script src="vuejs-2.5.16.js"></script>
    <script>
        
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"100",
              },
            //   定义计算属性，可以通过vm.msg修改data的msg值，str的值也会随之改变
              computed:{
                  str:function() {
                    console.log("fn2---")
                      return this.msg+"abc"
                  },
            fn2(){
                return new Date()
            }
        },
              methods:{
                    fn1(){
                        console.log("fn1---")
                        return new Date()
                    }
              }
        })
        
    </script>

2、ref操作dom元素：

1、给要操作的dom元素设置ref

2、mounted(){this.$refs.ref属性的值.事件名}

   <div id="app" v-cloak>
//ref的值可以自定义，不过要和下面$refs后面的tdb值一同修改才不会报错
       <input type="text" ref="tdb">
    </div>
    <script src="vuejs-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
              },
              mounted(){
                  this.$refs.tdb.focus()
              }
        })
    </script>

运行结果就是一个输入框在刚加载的完成的时候就获得了焦点

好啦，又到了说再见的时候咯，拜拜啦